Floating Labels und Divs auf einem Formular

Question

Ich habe ein Formular auf meiner Seite und ich möchte alle Textfelder so positionieren, dass die linken Kanten alle in einer Linie sind.

Ich habe den folgenden Code geschrieben, die in Firefox funktioniert gut:

<style type="text/css"> 
label { 
    float: left; 
    clear: both; 
    width: 250px; 
    margin-top: 10px; 
} 

input { 
    float: left; 
    margin-top: 10px; 
} 
</style> 



<label>First Name:</label> 
<input type="text" name="fname"> 

<label>Last Name:</label> 
<input type="text" name="lname"> 

<label>Phone Number:</label> 
<input type="text" name="phone"> 

jedoch, wenn in IE6 die Textfelder betrachtet sind alle auf einer Linie, wo die Etiketten positioniert sind, wie ich sie sein wollen. Ich habe versucht, das Problem stundenlang zu sortieren und das einzige, was ich mit oben kommen kann, ist eine Spanne dazwischen jedes Etikett/Textbox Kombination zu platzieren, die den Schwimmer löscht, etwa so:

<label>First Name:</label> 
<input type="text" name="fname"> 

<span style="clear: both;"></span> 

<label>Last Name:</label> 
<input type="text" name="lname"> 

<span style="clear: both;"></span> 

<label>Phone Number:</label> 
<input type="text" name="phone"> 

aber ich weiß, das ist nicht korrekt, da leere Elemente nicht erlaubt sind. Irgendwelche Ideen, wie ich meine Probleme umgehen und das Layout in beiden Browsern gleich machen kann.

Dank

Answer 1

Sie jeden Satz von Label/Eingang des in einem div und clear:left auf der div und nicht auf den Etiketten wickeln kann.

label { 
    float: left; 
    width: 250px; 
    margin-top: 10px; 
} 

input { 
    float: left; 
    margin-top: 10px; 
} 
div { 
    clear: left; 
} 

Hoffe, dass hilft.

Answer 2

Meine bevorzugte Lösung besteht darin, jedes Feld (Label + Eingabe) in einen Wrapper wie div oder li einzuschließen. Dann können Sie sicherstellen, dass der Wrapper seine untergeordneten Elemente enthält, indem Sie ihn entweder schweben lassen oder (vorzugsweise) den Überlauf festlegen: verdeckt. Das sollte sicherstellen, dass die Felder zusammen und nacheinander enden. Sobald dies erledigt ist, sollte das Ausrichten jedes Labels mit seinem Eingabeelement eine leichte Aufgabe sein (so wie es aussieht).

Answer 3

Sie nur jeden Satz von Label/Eingabe in einem fieldset umhüllen konnte ...

<fieldset> 
    <label>First Name:</label> 
    <input type="text" name="fname"> 
</fieldset> 

<fieldset> 
    <label>Last Name:</label> 
    <input type="text" name="lname"> 
</fieldset> 

<fieldset> 
    <label>Phone Number:</label> 
    <input type="text" name="phone"> 
</fieldset> 

Answer 4

Der einfachste Weg, um es für den IE6 zu beheben, ohne HTML ändern zu müssen, ist es, die float: left auf dem ersetzen Eingabe von display: block. Dies wird es in modernen Browsern brechen, obwohl, so würden Sie am besten setzen:

input { 
    display: block; 
    float: none; 
} 

in Ihrem bedingten Sheet (e) für IE6 und IE7 (das hat das gleiche Problem).

Aber eigentlich ist Ihre Idee, ein Element dazwischen hinzuzufügen, nicht so schlecht. Statt <span> können Sie jedoch nach jeder Eingabe eine <br> hinzufügen. Oder, vorzugsweise sogar, wickeln Sie jedes Paar in eine <p>. Beides würde dein Problem lösen.

Also, das kommt im Wesentlichen auf das, was Sie bereits getan haben oder was die anderen vor mir vorgeschlagen haben, aber in einer semantisch korrekten Art und Weise.

In der Tat, vorausgesetzt, diese Elemente erscheinen tatsächlich direkt in einem <form> Elemente, sie sind angeblich in einem Block-Element zu sein (wie ein p, div, ul oder fieldset) seit in HTML4, form elements can only contain blocks (or scripts).

Answer 5

Ihr Problem ist höchstwahrscheinlich, dass die Kombination aus Label und Eingabe zu breit für Ihren Container in IE6 (perhaps due to a bug in IE6) ist. Versuchen Sie entweder, Ihren Behälter etwas größer zu machen oder die Etiketten/Eingaben etwas kleiner zu machen.

Auch ich vor kurzem put together a demo of different form styling techniques für jemanden. Sie könnten insgesamt helfen.