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

J'ai input du texte et label balises. Je ne peux pas comprendre le CSS pour obtenir le texte de l'étiquette pour aligner à droite ci-dessous le texte d'entrée. Voici un extrait du code 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:

[zone de saisie 1] [zone de saisie 2] 
étiquette 1 label 2

etc, avec tous les éléments.

source d'informationauteur ina

  1. 3

    Utiliser un tableau (une entrée/label paire par cellule) ou de gauche flottant divs (une entrée/label paire 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;
}
  2. 1

    Vous rendrait la tâche beaucoup plus facile en enveloppant chaque champ (dans ce cas, chaque entrée/de l'étiquette de la paire) dans un div.

  3. 0

    Vous peut utiliser pur css pour obtenir cette fonction pour obtenir ce que vous voulez, mais il exige beaucoup de adhoc positionnement de choses que vous êtes mieux de ne pas le faire.

    La façon la plus simple est de mettre l'étiquette en dessous de l'entrée sur le code 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 entrée/étiquette de paire avec un div, et de définir 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;
}