Come forzare una casella e un testo sulla stessa riga?

Question

Come posso forzare una casella di controllo e il seguente testo a comparire sulla stessa riga? Nel seguente codice HTML, vorrei solo che la linea si interrompesse tra etichetta e input, non tra input e label.

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

per chiarire: se il fieldset/p non è sufficientemente larga per tutti gli elementi, invece di:

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

voglio:

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

Answer 1

Non si spezzerà se si avvolge ciascun elemento in un div. Controlla il mio violino con il link qui sotto. Ho realizzato la larghezza del fieldset di 125 px e ho reso ogni oggetto largo 50 px. Vedrai che l'etichetta e la casella di controllo rimangono affiancate su una nuova riga e non si rompono.

<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

Prova questa 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 nome potrebbe essere "John Winston Ono Lennon", che è molto lungo ... quindi cosa vuoi fare? (non si conoscerà mai la lunghezza) ... si potrebbe eseguire una funzione che avvolge x caratteri come: "john winston o ...."

Answer 4

Prova questa. Il seguente considera casella ed etichetta come un elemento unico:

<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

Un altro modo per farlo unicamente con css:

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

noti che questo costringe ogni casella e l'etichetta su una linea separata, piuttosto che solo così solo quando c'è overflow.