web-dev-qa-db-fra.com

Comment aligner la case à cocher et étiqueter dans la même ligne en HTML?

Dans les balises li, je place une case à cocher et une étiquette.

Si le texte de l'étiquette est plus grand que l'étiquette, il passe à la ligne suivante.

J'ai enveloppé le texte de l'étiquette mais il n'a pas aligné la case et l'étiquette sur la même ligne si le texte de l'étiquette est trop long.

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label style="Word-wrap:break-Word">testdata</label>
</li>

Merci,

htmlcss
10
user3392135

Enveloppez la case à cocher avec l'étiquette et cochez cette case 

HTML:

<li>
     <label for="checkid"  style="Word-wrap:break-Word">
        <input id="checkid"  type="checkbox" value="test" />testdata
     </label>
</li>

CSS:

[type="checkbox"]
{
    vertical-align:middle;
}

http://jsfiddle.net/pKD9K/1/

18
Ijas Ameenudeen

Vous devez utiliser <label for=""> pour les cases à cocher ou les radios, et aligner les cases vertical-align suffit

Essayez de changer votre balisage à ceci

<li>
    <input id="checkid" type="checkbox" value="test" />
    <label for="checkid">testdata</label>
</li>

<li>
    <input id="checkid2" type="checkbox" value="test" />
    <label for="checkid2">testdata 2</label>
</li>

Et définissez CSS comme

input[type="checkbox"]
{
    vertical-align:middle;
}

En cas de texte long 

label,input{
    display: inline-block;
    vertical-align: middle;
}

Note latérale: Dans label, la valeur de for doit être l'id de la case à cocher.

Fiddle

Updated Fiddle

8
Dhaval Marthak

Essayez-le

<li>
<input id="checkid" type="checkbox" value="test" style="float: left;">
<label style="Word-wrap: break-Word; line-height: 16px; float: left;">testdata</label>
</li>
1
Piyush Marvaniya

Si vous utilisez bootstrap, utilisez cette classe dans le holding 

radio-inline

Exemple:

<label for="active" class="col-md-4 control-label">Active</label>
<div class="col-md-6 radio-inline">
    <input type="checkbox" name="active" value="1">
<div>

Ici, le libellé Actif et la case à cocher apparaissent alignés.

0
Dibyendu Mitra Roy

Placez simplement une div autour de l'entrée et étiquetez ...

    <li>
      <div>
        <input id="checkid"  type="checkbox" value="test" />
      </div>
      <div>
        <label  style="Word-wrap:break-Word">testdata</label>
      </div>
    </li>
0
Bob