How to force a checkbox and text on the same line?
HtmlHtml Problem Overview
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
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
Try this CSS:
label {
display: inline-block;
}
Solution 3 - Html
Try this. The following considers checkbox and label as a unique 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>
Solution 4 - Html
Another way to do this solely with css:
input[type='checkbox'] {
float: left;
width: 20px;
}
input[type='checkbox'] + label {
display: block;
width: 30px;
}
Note that this forces each checkbox and its label onto a separate line, rather than only doing so only when there's overflow.
Solution 5 - Html
You can wrap the label around the input:
**<label for="a"><input type="checkbox" id="a">a</label>**
This worked for me.
Solution 6 - Html
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>
a name could be " john winston ono lennon" which is very long... so what do you want to do? (youll never know the length)... you could make a function that wraps after x chars like : "john winston o...."