Texte de l'étiquette CSS juste en dessous de l'élément d'entrée

Question

J'ai les balises input text et label. Je ne peux pas comprendre le CSS pour obtenir le texte d'étiquette à aligner juste en dessous du texte d'entrée. Voici un extrait du 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>​ 
 

Essayer d'obtenir:

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

etc, avec tous les éléments.

Answer 1

Un rapidement fouetté par exemple qui fonctionne:

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

pourrait être améliorée, mais je le trouve plus propre que div étrangers s, et il se dégrade beaucoup plus agréable que le label -after- input -approché lorsque le support CSS est absent. Personnellement, je préfère emboîter les input dans les label s de toute façon.

Answer 2

Utilisez une table (une paire d'entrées/étiquettes par cellule) ou des divs flottantes à gauche (une paire d'entrée/étiquette par div). Exemple:

<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

Vous pouvez utiliser css pur pour obtenir ce pour obtenir ce que vous voulez, mais il faut beaucoup de choses de positionnement adhoc que vous êtes mieux de ne pas Faire.

La façon la plus simple est de mettre l'étiquette sous l'entrée sur le 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> 

Ensuite, vous pouvez envelopper chaque paire d'entrée/étiquette avec un div, et régler la div comme ceci:

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

Ensuite, vous pouvez mettre

#sg1 label 
{ 
    float: right; 
} 

input 
{ 
    display:block; 
} 

Answer 4

tu ferais le travail beaucoup plus facile en enveloppant chaque champ (dans ce cas, chaque entrée/l abel pair) dans un div.