Jak wymusić zaznaczenie i tekst w tej samej linii?

Question

Jak wymusić zaznaczenie pola wyboru i następującego tekstu w tym samym wierszu? W poniższym kodzie HTML chciałbym, aby linia łamała się między etykietą a wprowadzaniem danych, a nie między danymi wejściowymi a etykietą.

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

Aby wyjaśnić: jeżeli fieldset/p nie jest wystarczająco szeroki dla wszystkich elementów, zamiast:

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

chcę:

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

Answer 1

Nie będzie się łamał, jeśli zawiniesz każdy element w dziale div. Sprawdź moje skrzypce z linkiem poniżej. Zrobiłem szerokość zestawu pól 125px i zrobiłem każdy element o szerokości 50 pikseli. Zobaczysz etykietę i pole wyboru pozostaną obok siebie w nowej linii i nie ulegną zerwaniu.

<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

Spróbuj 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> 

nazwa może być „John Winston Ono Lennon”, która jest bardzo długa ... więc co chcesz zrobić? (nigdy nie poznasz długości) ... możesz utworzyć funkcję, która będzie się owijała po znakach x: "john winston o ...."

Answer 4

Spróbuj tego. Poniższy uważa wyboru i etykietę jako unikatowy element:

<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

Innym sposobem, aby to zrobić wyłącznie z CSS:

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

Zauważ, że to zmusza każde pole i jego etykietę na osobnej linii, raczej niż robić to tylko wtedy, gdy jest przepełnienie.