Gleiche Länge von labels

[Gunnar Bittersmann]

@@Rainer:

nuqneH

[…] denn das Nachfolgende verstehe ich leider überhaupt nicht.

[…] z.B. könntest du label und input nebeneinander floaten lassen

label, input { float: left }

Damit erhält die 'display'-Eigenschaft implizit den Wert "block", der muss also nicht explizit angegeben werden, damit die 'width'-Eigenschaft wirkt.

und jeweils vor einem label den Textfluss wiederherstellen (neue Zeile)

label { clear: left }

Markup:

<label for="Name">Name:</label> <input id="Name" name="Name"/>  
<label for="Vorname">Vorname:</label> <input id="Vorname" name="Vorname"/>

Stylesheet:

label  
{  
  clear: left;  
  float: left;  
  width: 6em;  
}  
  
input  
{  
  float: left;  
  margin-bottom: 0.5em;  
}

oder du kannst das input-Element in das label-Element notieren

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

Dann gehört das Label zum eingeschlossenen Eingabe-Element. Für semantisch sinnvoll halte ich dies nicht. @for- und @id-Attribute sind dann nicht notwendig.

Style:

label  
{  
  display: block;  
  overflow: hidden;  
  width: 16em;  
}  
  
input  
{  
  float: right;  
  margin-bottom: 0.5em;  
}

oder du gruppierst label und input-Element mit einem div- oder fieldset-Element.

<fieldset><label for="Name">Name:</label> <input id="Name" name="Name"/></fieldset>  
<fieldset><label for="Vorname">Vorname:</label> <input id="Vorname" name="Vorname"/></fieldset>

Dann braucht man kein 'clear':

fieldset  
{  
  overflow: hidden;  
}  
  
label  
{  
  clear: left;  
  float: left;  
  width: 6em;  
}  
  
input  
{  
  float: left;  
  margin-bottom: 0.5em;  
}

Man braucht nicht einmal 'float', "inline-block" bietet sich an. Das hat auch den Vorteil, dass 'vertical-align' wirkt:

label  
{  
  display: inline-block;  
  vertical-align: middle;  
  width: 6em;  
}  
  
input  
{  
  margin-bottom: 0.5em;  
}

Qapla'