How to force a checkbox and text on the same line?
How can I force a checkbox and following text to appear on the same line? In the following HTML, I'd only want the line to break between label and input, not between input and 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>
To clarify: if the fieldset/p is not wide enough for all elements, instead of:
[] a [] b []
c [] d [] e
I want:
[] a [] b
[] c [] d
[] e
It wont break if you wrap each item in a div. Check out my fiddle with the link below. I made the width of the fieldset 125px and made each item 50px wide. You'll see the label and checkbox remain side by side on a new line and don't break.
<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/
Try this CSS:
label {
display: inline-block;
}