Tekst etykiety CSS tuż pod elementem wejściowym

Question

Mam input znaczników tekstowych i tekstowych i label. Nie mogę odczytać kodu CSS, aby tekst etykiety był wyrównany tuż pod tekstem wejściowym. Oto fragment kodu 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>​ 
 

Próbuje:

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

etc, ze wszystkimi elementami.

Answer 1

szybko przeniesiono na przykład, że działa:

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>​

mogłyby być lepsze, ale uważam, że czystsze niż obcych div s, a to obniża znacznie ładniejszy niż label -after- input -approach, gdy obsługa CSS jest nieobecna. Osobiście wolę zagnieżdżać input s w label s.

Answer 2

Użyj tabeli (jedna para danych wejściowych/etykiety na komórkę) lub jednostek lewostronnych (jedna para danych wejściowych/etykiet na element div). Przykład:

<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

Ty może stosowanie czystego css, aby uzyskać to, aby osiągnąć to, co chcesz, ale to wymaga dużo adhoc pozycjonowania rzeczy, że jesteś lepiej nie robić.

Najprostszym sposobem jest umieszczenie na etykiecie pod wejściem na HTML:

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

Następnie można owinąć każdą parę wejścia/etykiety z div i ustawić div tak:

<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; 
} 

Następnie można umieścić

#sg1 label 
{ 
    float: right; 
} 

input 
{ 
    display:block; 
} 

Answer 4

Byłbyś zadanie dużo łatwiejsze owijając poszczególne pola (w tym przypadku, każde wejście/l abel pair) w div.