# Formularfelder Ausrichten



## Da_Chris (21. Oktober 2009)

Hallo Leute. 
Ich denke jeder hat sich schon mal Gedanken gemacht welcher Weg am sinnvollsten ist Formulare und deren Labels schön auszurichten.
Da würde mich eure Technik mal interessieren.
Mit XHTML sind ja Tabellen mehr oder weniger in Ungnade gefallen was die Verwendung als Gruppierungselement angeht.
Aber wie macht ihr das denn damit die Labels links vom Feld stehen?

Meine Technik bisher 3 DIV 2x mit float im Style und 1x mit clear.

```
<div style="float:left;">Label: </div>
<div style="float:left;"><input type="text" name="test" value="" /></div>
<div style="clear:both;"></div>
```
Ich bin aber selber damit nicht wirklich zufrieden. Macht A zu viel schreibarbeit und B ist es etwas unübersichtlich und C lässt sich die Sache mit float und clear immer schlecht handeln.

Jetzt bin ich mal gespannt wie das so von anderen gemacht wird


----------



## Maik (21. Oktober 2009)

Hi,

das Konstrukt liesse sich mit dem Listenelement auszeichnen:

```
<ul>
    <li>Label:</li>
    <li><input type="text" name="test" value="" /></li>
</ul>
```


```
ul {
list-style:none;
margin:0;
padding:0;
}
li {
display:inline;
}
```

mfg Maik


----------



## Da_Chris (21. Oktober 2009)

Oh hehe naja es geht darum Label links vom Feld auszurichten...
Sorry hätte ich dazu sagen müssen.

EDIT: eben gesehen dass li auf display inline tatsächlich das label links ausrichtet....
Gibts noch mehr techniken?


----------



## Maik (21. Oktober 2009)

Da_Chris hat gesagt.:


> Gibts noch mehr techniken?


Jo, um auf ein einfaches Handling bei float und clear zurückzukommen 


```
<ul class="clearfix">
    <li>Label:</li>
    <li><input type="text" name="test" value="" /></li>
</ul>
<p>content</p>
```


```
li {
float:left;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
```

mfg Maik


----------



## Da_Chris (21. Oktober 2009)

mh also der code bringt im firefox fehler die dots sind noch zu sehen.
Und den CSS Code hab ich so noch nicht gesehen.... kannst du den bitte erklären?


----------



## Maik (21. Oktober 2009)

Da_Chris hat gesagt.:


> mh also der code bringt im firefox fehler die dots sind noch zu sehen.


An dieser CSS-Regel aus meinem ersten Beispiel hat sich nichts verändert, d'rum hab ich sie eben in der Variante nicht mehr erwähnt:

```
ul {
list-style:none;
margin:0;
padding:0;
}
```



Da_Chris hat gesagt.:


> Und den CSS Code hab ich so noch nicht gesehen.... kannst du den bitte erklären?


Quelle: How To Clear Floats Without Structural Markup

mfg Maik


----------



## Da_Chris (21. Oktober 2009)

cool werd ich mir anschauen. Wenn wer noch andere Ideen hat nur her damit


----------



## Maik (21. Oktober 2009)

CSS-Only, Table-less Forms
Form layout
Prettier Accessible Forms
sowie

CSS-Based Forms: Modern Solutions
Web Form Design: Modern Solutions and Creative Ideas

mfg Maik


----------

