Formular - Felder anordnen

[Felix Riesterer]

Lieber Bernd,

in Deinem Quältext sehe ich vor lauter div keinen vernünftigen Code. Man benutzt im Allgemeinen ein div-Element, um mehrere(!) Block(!)-Elemente zu gruppieren. In Deinem Beispiel sehe ich die "Zeilen" als div realisiert, obwohl es darin nur ein einziges Element gibt - und dazu noch ein Inline-Element!

Was Du offensichtlich nicht bedacht hast, sind die für Eingabe-Elemente unbedingt notwendigen Beschriftungen. Das Schöne an diesen zusätzlichen Elementen ist, dass man sie mit CSS dazu nutzen kann, Deine gewünschte Darstellung zu erreichen, vor allem, wenn man verschachtelt!

<p>
  <label>
    Name:
    <input name="name">
  </label>
</p>

Wenn Du jetzt das label auf display:block und automatische Breite schaltest (praktisch ist das dann 100%), ihm anstelle des bisherigen div-Elements den unteren Rahmen gibst, dann sollte die Darstellung wieder so aussehen, wie Du das wolltest.

Natürlich kann so ein label ein for-Attribut tragen, welches man mit CSS "anfassen" kann:

<label for="der-name">
  <input id="der-name" name="name">
</label>

[for="der-name"] {
  width: 49%;
}

So kannst Du Deine beiden Eingabefelder, die nebeneinander stehen sollen, in ein gemeinsames Elternelement (ich wähle p) setzen und mittels oben gezeigtem for-Attribut in ihrer Breite passend reduzieren, damit es mit dem Platz klappt.

Liebe Grüße,

Felix Riesterer.