CSS-Gittersystem für Formulare (mehrspaltig)

Question

Für die Zukunft sehen Sie hier das Endergebnis mit pixelgenauer Präzision:

Der CSS-Code:

._25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
textarea {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}
select {
    border: 1px solid #B3B3B3;
    width: 100%;
    -moz-border-radius: 3px;
}

Und einige Beispiele für HTML-Code:

<div class="_50">
    <p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div>

<div class="_50">
    <p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p>
</div>

---

Seit kurzem verwende ich CSS-Rastersysteme, und ich finde den gesamten Prozess der Gestaltung einer Webseite viel einfacher. Jetzt versuche ich, Formularelemente zu stylen, aber Ich habe wirklich Schwierigkeiten, Formulare mit Spalten zu erstellen Nehmen Sie das folgende Beispiel:

• div (Breite = 400px)
  • Formular
    • ul
      • li .halb
        • Etikett
        • Eingabe (sollte 200px breit sein)
      • li .halb
        • anderes Etikett
        • eine weitere Eingabe (sollte ebenfalls 200px breit sein)

Grundsätzlich wende ich eine Klasse an, die ein Breitenattribut von 50% hat, aber wenn ich beide Eingaben nebeneinander stelle, wird die Zeile größer als 100% (400px) - ich schätze, das liegt an der Rahmen, Ränder und Abstände .

Gibt es ein CSS-Rastersystem, das ich verwenden kann, um mehrspaltige Formulare zu haben, während alle Formularelemente immer noch die gleiche Größe haben (Inputs, Selects und Textareas); z.B. 1 Input in 1 Spalte sollte 400px haben, während 2 Spalten jeweils 200px haben sollten.

EDIT: Wufoo hat einige Beispiele von dem, was ich versuche zu tun, aber ich bin zu unwissend in CSS zu verstehen, dass alle Code und ich würde es begrüßen, wenn jemand mir einige Hinweise geben könnte.

Answer 1

Ich musste etwas Ähnliches machen und habe meine Halbspalten auf 46 % gesetzt. Es lässt ein zusätzliches bisschen Platz für die Polsterung und bekommt alle Ihre Eingabefelder einheitlich Größe.

Answer 2

Eine Antwort lautet Blaupause . Ich habe gelesen, dass Sie nicht glauben, dass dies die Lösung ist, aber ich würde es trotzdem so machen. Die ganze Leichtigkeit von Tabellen mit der ganzen Kraft von CSS.

Mit Blueprint ist das Rechnen ziemlich einfach. Sagen wir, Ihr Formular erstreckt sich über 10 Spalten.

<div id="contact-form" class="span-10">
  <h3>Contact Form</h3>
  <form action="contact">
  <div id="form-sec-1" class="span-5">
     <label>Name</label> <br/>
     <input type="text" name="name" /> <br/>
     <label>ZIP code</label> <br/>
     <input type="text" name="zipcode" />
  </div>
  <div id="form-sec-2" class="span-5 last">
     <label>Email</label> <br/>
     <input type="text" name="email" /> <br/>
     <label>Country</label> <br/>
     <input type="text" name="country" />
  </div>
  <div id="form-sec-3" class="span-10 last">
     <label>Message</label> <br/>
     <textarea name="message" />
  </div>
  <div id="form-sec-4" class="span-8">
    <input type="checkbox" name="copy"/>
    <label>Send me a copy</label>
  </div>
  <div id="form-sec-5" class="span-2">
     <input type="submit"/>
  </div>
  </form>
</div>

Answer 3

Oh wow, ich habe gerade gedacht, was in der Welt mit der CSS-Welt los ist, dann habe ich diesen Entwurf des CSS-Grid-Layout-Editors gesehen, http://dev.w3.org/csswg/css3-grid-align/

Ich kann mir immer noch nicht erklären, warum die CSS-Welt nicht wirklich in diese Richtung gedacht hat, welche Erklärung kann es für das Fehlen einer solchen Funktion in CSS geben.