Gleiche Länge von labels

[Rainer]

Hallo,
Wenn ich labels definiere

  
<label for="Name">Name:</label>....  
<label for="Name">Vorname:</label>....  

, wie kann ich dann erreichen, dass die Eingabefelder auf einer senkrechten Linie ausgerichtet werden, ohne dass ich z.B. angeben muss

  
<label for="Name">Name:&nbsp;&nbsp;&nbsp;</label>....  
<label for="Name">Vorname:</label>....  

Gruß
Rainer

[suit]

Mit HTML garnicht - aber mit CSS. "width" ist hier die geeignete Eigenschaft, wobei hier hinzuzufügen ist, dass label ein inline-Element ist. Ohne verändern dieser Eigenschaft ist "width" wirkungslos.

Wie du die Elemente untereinander bringst, hängt von deinem Markup ab - z.B. könntest du label und input nebeneinander floaten lassen und jeweils vor einem label den Textfluss wiederherstellen (neue Zeile) - oder du kannst das input-Element in das label-Element notieren - oder du gruppierst label und input-Element mit einem div- oder fieldset-Element. Aber das ist eine HTML-Sache.

[Rainer]

Mit HTML garnicht - aber mit CSS. "width" ist hier die geeignete Eigenschaft, wobei hier hinzuzufügen ist, dass label ein inline-Element ist. Ohne verändern dieser Eigenschaft ist "width" wirkungslos.

Wenn die Änderung der "inline-Eigenschaft keine unerwünschten Nebenwirkungen hat, würde ich gerne so verfaheren, denn das Nachfolgende verstehe ich leider überhaupt nicht.

Wie du die Elemente untereinander bringst, hängt von deinem Markup ab - z.B. könntest du label und input nebeneinander floaten lassen und jeweils vor einem label den Textfluss wiederherstellen (neue Zeile) - oder du kannst das input-Element in das label-Element notieren - oder du gruppierst label und input-Element mit einem div- oder fieldset-Element. Aber das ist eine HTML-Sache.

Danke
Rainer

[suit]

Wenn die Änderung der "inline-Eigenschaft keine unerwünschten Nebenwirkungen hat, würde ich gerne so verfaheren, denn das Nachfolgende verstehe ich leider überhaupt nicht.

Die nachfolgenden Dinge beziehen sich darauf - die display-Eigenschaft zu ändern hat immer "Nebenwirkungen". Ob das nun explizit mittels inline-block passiert oder das Element implizit in einen block formatting context gebracht wird (z.B. durch float) ist dabei egal.

Um das nachfolgende wirst du allerdings nicht herumkommen.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float ist vermutlich deine erste Baustelle.

[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'

[Felix Riesterer]

Lieber Rainer,

<label for="Name">Name:</label>....

<label for="Name">Vorname:</label>....

  
der im for-Attribut notierte Wert verweist auf eine - dokumentenweit einmalige - ID eines anderen Elements! Ansonsten ist das Verwenden des for-Attributs sinnfrei.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[Rainer]

Hi,

<label for="Name">Name:</label>....

<label for="Name">Vorname:</label>....

>   

War ein Schreibfehler, natürlich musste es heißen  
~~~html
<label for="Name">Name:</label>....  
<label for="Vorname">Vorname:</label>....

[Felix Riesterer]

Lieber Rainer,

War ein Schreibfehler, natürlich musste es heißen

<label for="Name">Name:</label>....

<label for="Vorname">Vorname:</label>....

  
OK. Und wenn Du nun mit inline-block arbeitest, kannst Du auch eine width vergeben:  
  
~~~css
label {  
    display: inline-block;  
    width: 6em;  
}

Liebe Grüße,

Felix Riesterer.