Html 如何强制复选框和文本在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10469256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force a checkbox and text on the same line?
提问by Andreas
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.
如何强制复选框和以下文本显示在同一行？在下面的 HTML 中，我只希望在标签和输入之间换行，而不是在输入和标签之间。
<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:
澄清：如果 fieldset/p 对所有元素都不够宽，而不是：
[] a [] b []
c [] d [] e
I want:
我想要：
[] a [] b
[] c [] d
[] e
采纳答案by Adam Pflantzer
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.
如果您将每个项目都包装在一个 div 中，它就不会中断。通过下面的链接查看我的小提琴。我将字段集的宽度设置为 125 像素，并将每个项目设置为 50 像素宽。您会看到标签和复选框并排保留在新行上并且不会中断。
<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>
回答by Brent Smith
Try this CSS:
试试这个 CSS：
label {
display: inline-block;
}
回答by ManuelConde
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>
回答by Rick Westera
Another way to do this solely with css:
仅使用 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.
请注意，这会强制每个复选框及其标签放在单独的行上，而不是仅在出现溢出时才这样做。
回答by user12393162
You can wrap the label around the input:
您可以将标签包裹在输入周围：
**<label for="a"><input type="checkbox" id="a">a</label>**
This worked for me.
这对我有用。
回答by Royi Namir
http://jsbin.com/etozop/2/edit
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...."
一个名字可以是“john winston ono lennon”，它很长……所以你想做什么？（你永远不会知道长度）...你可以制作一个在 x 个字符后包装的函数，例如：“john winston o....”
