CSS-Etikett Text direkt unter Eingabeelement

Question

Ich habe input Text und label Tags. Ich kann das CSS nicht herausfinden, um den Beschriftungstext direkt unter dem Eingabetext auszurichten. Hier ist ein Ausschnitt des HTML:

 

<form id="sg1"> 
    <label for="member1">member 1</label> 
    <input name="member1" id="member1" value="jack" /> 
    <label for="member2">member 2</label> 
    <input name="member2" id="member2" value="carter" /> 
    <label for="member3">member 3</label> 
    <input name="member3" id="member3" value="jackson" /> 
    <label for="member4">member 4</label> 
    <input name="member4" id="member4" value="tielk" />  
</form>​ 
 

Der Versuch, zu erhalten:

 
[input box 1] [input box 2] 
     label 1   label 2 

etc, mit allen Elementen.

Answer 1

Ein schnell Beispiel Schlagsahne, das funktioniert:

input { 
 
    display: inline-block; 
 
    width: 6em; 
 
    position: relative; 
 
    top: -3em; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 6em; 
 
    margin-right: .5em; 
 
    padding-top: 1.5em; 
 
}

<form id="sg1"> 
 
    <label>member 1 <input name="member1" id="member1" value="jack" /></label> 
 
    <label>member 2 <input name="member2" id="member2" value="carter" /></label> 
 
    <label>member 3 <input name="member3" id="member3" value="jackson" /></label> 
 
    <label>member 4 <input name="member4" id="member4" value="tielk" /></label> 
 
</form>​

verbessert werden könnte, aber ich finde es sauberer als Fremd div s, und es verschlechtert sich viel schöner als das label -after- input - Ansatz, wenn CSS-Unterstützung nicht vorhanden ist. Persönlich bevorzuge ich es, die input s in der label s trotzdem zu verschachteln.

Answer 2

verwenden um eine Tabelle (ein Eingang/label Paar pro Zelle) oder links floating divs (ein Eingang/label Paar pro div). Beispiel:

<div class="pair"> 
    <input type="text" name="foo" value="bar" /><br /> 
    <label for="foo">shabba</label> 
</div> 
<div class="pair"> 
    … 
</div> 

CSS:

div.pair { 
    float:left; 
} 

Answer 3

Sie können Verwendung reiner CSS diese zu bekommen, um zu erreichen, was Sie wollen, aber es erfordert eine Menge adhoc Positionierung Sachen, die Sie besser sind weg nicht tun.

Der einfachste Weg ist das Etikett unter dem Eingang auf der html setzen:

<form id="sg1"> 
    <input name="member1" id="member1" value="jack" /> 
    <label for="member1">member 1</label> 
    <input name="member2" id="member2" value="carter" /> 
    <label for="member2">member 2</label> 
    <input name="member3" id="member3" value="jackson" /> 
    <label for="member3">member 3</label> 
    <input name="member4" id="member4" value="tielk" />  
    <label for="member4">member 4</label> 
</form> 

Dann können Sie jede Eingabe/label Paar mit einem div wickeln, und stellen Sie die div wie so:

<form id="sg1"> 
    <div class="wrap"> 
     <input name="member1" id="member1" value="jack" /> 
     <label for="member1">member 1</label> 
    </div> 
    <div class="wrap"> 
     <input name="member2" id="member2" value="carter" /> 
     <label for="member2">member 2</label> 
    </div> 
    <div class="wrap"> 
     <input name="member3" id="member3" value="jackson" /> 
     <label for="member3">member 3</label> 
    </div> 
    <div class="wrap"> 
     <input name="member4" id="member4" value="tielk" />  
     <label for="member4">member 4</label> 
    </div> 
</form> 

#sg1 div 
{ 
    clear: both; 
    float: left; 
} 

Als nächstes können Sie

#sg1 label 
{ 
    float: right; 
} 

input 
{ 
    display:block; 
} 

Answer 4

setzen Sie den Job (in diesem Fall viel einfacher, indem Sie jedes Feld machen würde Einwickeln, jede Eingabe/l abel Paar) in einem div.