web-dev-qa-db-fra.com

Comment forcer une case à cocher et un texte sur la même ligne?

Comment puis-je forcer une case à cocher et le texte suivant à apparaître sur la même ligne? Dans le code HTML suivant, je voudrais seulement que la ligne se sépare entre étiquette et entrée, pas entre entrée et étiquette.

<p><fieldset>
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">
    <!-- depending on width, a linebreak can occur here. -->
    <label for="b">b</label>
    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

Pour clarifier: si le champs/p n'est pas assez large pour tous les éléments, au lieu de:

[] a [] b []
c [] d [] e

Je voudrais:

[] a [] b
[] c [] d
[] e
html
38
Andreas

Cela ne casserait pas si vous enveloppiez chaque article dans une div. Découvrez mon violon avec le lien ci-dessous. J'ai fait la largeur du fieldset 125px et chaque élément 50px large. Vous verrez que l'étiquette et la case à cocher restent côte à côte sur une nouvelle ligne et ne se cassent pas.

<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak can occur here. -->
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/

31
Adam Pflantzer

Essayez ce CSS:

label {
  display: inline-block;
}
27
Brent Smith

Essaye ça. Les éléments suivants considèrent la case à cocher et l’étiquette comme un élément unique:

<style>
  .item {white-space: nowrap;display:inline  }
</style>
<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">aaaaaaaaaaaa aaaa a a a a a a aaaaaaaaaaaaa</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak NEVER occurs here. -->
    <label for="b">bbbbbbbbbbbb bbbbbbbbbbbbbbbbb  b b b b  bb</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">ccccc c c c c ccccccccccccccc  cccc</label>
</div>
</fieldset>
20
ManuelConde

Une autre façon de faire cela uniquement avec css:

input[type='checkbox'] {
  float: left;
  width: 20px;
}
input[type='checkbox'] + label {
  display: block;
  width: 30px;
}

Notez que cela force chaque case à cocher et son étiquette sur une ligne séparée, plutôt que de le faire uniquement en cas de débordement.

8
Rick Westera

http://jsbin.com/etozop/2/edit

put a div wrapper with WIDTH :

  <p><fieldset style="width:60px;">
   <div style="border:solid 1px red;width:80px;">
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">

    <label for="b">b</label>
   </div>

    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

un nom pourrait être "john winston ono lennon" qui est très long ... alors, que voulez-vous faire? (vous ne saurez jamais la longueur) ... vous pourriez faire une fonction qui enveloppe après x caractères comme: "john winston o ...."

0
Royi Namir