Cómo forzar una casilla de verificación y texto en la misma línea?

Question

¿Cómo puedo forzar una casilla de verificación y el siguiente texto para que aparezca en la misma línea? En el siguiente HTML, solo me gustaría que la línea se rompa entre la etiqueta y la entrada, no entre la entrada y la etiqueta.

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

Para aclarar: si el conjunto de campos/p no es lo suficientemente amplia para todos los elementos, en lugar de:

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

Quiero:

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

Answer 1

No se romperá si envuelves cada elemento en un div. Mira mi violín con el siguiente enlace. Hice el ancho del fieldset 125px e hice que cada elemento tuviera 50px de ancho. Verá que la etiqueta y la casilla de verificación permanecen una al lado de la otra en una nueva línea y no se rompen.

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

Answer 2

probar este CSS:

label { 
    display: inline-block; 
} 

Answer 3

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 nombre podría ser "John Winston Ono Lennon", que es muy largo ... así que ¿qué quieres que haga? (nunca sabrás la longitud) ... puedes hacer una función que se ajuste a x caracteres como: "john winston o ..."

Answer 4

probar esto. La siguiente considera casilla de verificación y la etiqueta como un elemento único:

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

Answer 5

Otra manera de hacerlo exclusivamente con CSS:

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

Tenga en cuenta que esto obliga a cada casilla y su etiqueta en una línea separada, en vez que solo hacerlo solo cuando hay desbordamiento.