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
This question is related to
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>
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.
You can wrap the label around the input:
**<label for="a"><input type="checkbox" id="a">a</label>**
This worked for me.
Try this CSS:
label {
display: inline-block;
}
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...."
Source: Stackoverflow.com