Texto de la etiqueta CSS justo debajo del elemento de entrada

Question

Tengo input etiquetas de texto y label. No puedo entender el CSS para alinear el texto de la etiqueta debajo del texto de entrada. He aquí un fragmento del código 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>​ 
 

Tratando de conseguir:

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

etc, con todos los elementos.

Answer 1

Una batida rápidamente ejemplo que funciona:

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

se puede mejorar, pero me parece que es más limpio que extrañas div s, y se degrada mucho mejor que el label -after- input: enfoque cuando no hay soporte de CSS. Personalmente, prefiero anidar el input s en el label s de todos modos.

Answer 2

Use una tabla (un par de entrada/etiqueta por celda) o divs flotantes a la izquierda (un par de entrada/etiqueta por div). Ejemplo:

<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

Usted puede usar CSS puro para conseguir esto para conseguir lo que quiere, pero requiere una gran cantidad de cosas adhoc posicionamiento que mejor no estás obra.

La forma más sencilla es poner la etiqueta debajo de la entrada en el 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> 

A continuación, se puede envolver cada par de entrada/etiqueta con un div, y establecer el div de este modo:

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

a continuación se puede poner

#sg1 label 
{ 
    float: right; 
} 

input 
{ 
    display:block; 
} 

Answer 4

que serías el trabajo mucho más fácil envolviendo cada campo (en este caso, cada entrada/l abel pair) en un div.