Html 防止文本在复选框下换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14714621/
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
Prevent text from wrapping under a checkbox
提问by Fillip Peyton
I'm laying out a set of checkboxes and I am running across the age-old issue of text wrapping underneath a checkbox if the text is too long.
我正在布置一组复选框，如果文本太长，我会遇到一个古老的问题，即文本在复选框下方换行。
My HTML:
我的 HTML：
<div class="right">
<form id="updateProfile">
<fieldset class="checkboxes">
<p>4. What is your favorite type of vacation?</p>
<label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
<label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
<label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
<label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
<label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
<label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
<label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
<label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
<label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
<label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
<label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
</fieldset>
</form>
</div>
My CSS:
我的CSS：
div.right{width:580px;}
form#updateProfile fieldset label{
display: block;
margin-bottom: 5px;
font-size: 16px;
float: left;
width: 33%;
}
See my fiddle here: http://jsfiddle.net/fmpeyton/7WmGr/
在这里查看我的小提琴：http: //jsfiddle.net/fmpeyton/7WmGr/
After much searching on different sites, I can't seem to find a reasonable solution. I am open for suggestions on changing my markup/styles, but I would like to keep the code as clean and semantic as possible.
在不同的网站上进行了大量搜索后，我似乎找不到合理的解决方案。我对更改标记/样式的建议持开放态度，但我希望尽可能保持代码的简洁和语义。
Thanks!
谢谢！
回答by Fillip Peyton
This seems to work:
这似乎有效：
I gave the labela margin-leftof 18px and the checkboxes a margin-leftof -18px.
我给了label一个margin-left的18像素和复选框一个margin-left-18px的。
Seems to work in Chrome & IE9.
似乎适用于 Chrome 和 IE9。
div.right {
width: 598px;
}
form#updateProfile fieldset label {
display: block;
margin-bottom: 5px;
font-size: 16px;
float: left;
width: 30%;
margin-left: 18px;
}
form#updateProfile fieldset label input[type='checkbox'] {
margin-left: -18px;
}<div class="right">
<form id="updateProfile">
<fieldset class="checkboxes">
<p>4. What is your favorite type of vacation?</p>
<label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
<label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
<label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
<label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
<label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
<label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
<label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
<label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
<label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
<label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
<label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
</fieldset>
</form>
</div>回答by Christian Michael
I like this ...
我喜欢这个 ...
HTML:
HTML：
<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label>
CSS:
CSS：
input[type="checkbox"] {
position: absolute;
}
input[type="checkbox"] ~ label {
padding-left:1.4em;
display:inline-block;
}
回答by gotohales
One option would be something like this.
一种选择是这样的。
form#updateProfile fieldset label{
display: block;
margin-bottom: 5px;
font-size: 16px;
float: left;
width: 30%;
padding-left: 3%;
position: relative;
}
input {
position: absolute;
left: -5px;
}
Demo here: http://jsbin.com/opoqon/1/edit
演示在这里：http: //jsbin.com/opoqon/1/edit
The way I tend to do it is different, which is not wrapping inputswith labels, rather doing something like
我倾向于这样做的方式是不同的，这是不包装inputs用labels的，而做这样的事情
<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>
which then allows for easier styling.
这样可以更轻松地进行造型。
Here is an example of that way: http://jsbin.com/otezut/1/edit
这是这种方式的一个例子：http: //jsbin.com/otezut/1/edit
But either way would work.
但无论哪种方式都会奏效。
回答by Pudica
Here's one that's less reliant on the size of the input elements.
这是一个不太依赖输入元素大小的方法。
div {width: 12em;}
label {
display: block;
white-space: nowrap;
margin: 10px;
}
label input {
vertical-align: middle;
}
label span {
display: inline-block;
white-space: normal;
vertical-align: top;
position: relative;
top: 2px;
}<div>
<label><input type="radio"><span>I won't wrap</span></label>
<label><input type="checkbox"><span>I won't wrap</span></label>
<label><input type="radio"><span>I am a long label which will wrap</span></label>
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label>
</div>回答by Rafael Perozin
I'd tried all the options and the best solution for was:
我尝试了所有选项，最佳解决方案是：
<div>
<label><input type="checkbox"><span>Text</span></label>
<label><input type="checkbox"><span>Text</span></label>
</div>
HTML like Pudica and Fillip suggested.
像 Pudica 和 Fillip 建议的 HTML。
And the CSS you only set the float:leftto the checkboxesand to prevent the text wrap around the checkbox you can simply use overflow:hiddenon the span.
和CSS，你只设置float:left为checkboxes，防止周围，你可以简单地使用复选框文本包装overflow:hidden上span。
[type="checkbox] {
float: left;
}
span {
overflow: hidden;
}
You can use margin-leftto give desired space from text to checkbox.
您可以使用margin-left从文本到复选框提供所需的空间。
回答by Chakotay
This is another option. It's very simple yet effective.
You take the part that's wrapping. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label>and you add a span with a class. I called the class antiWrap. Then you use css to add a left margin to it like. .antiWrap { margin-left: 18px; }Here's myfiddle based using your code. http://jsfiddle.net/alexhram/7WmGr/3/I think that's what your going for? Let me know.
这是另一种选择。它非常简单而有效。你负责包装的部分。<label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label>然后你添加一个带有类的跨度。我称类为 antiWrap。然后您使用 css 为其添加左边距。.antiWrap { margin-left: 18px; }这是基于使用您的代码的 myfiddle。http://jsfiddle.net/alexhram/7WmGr/3/我认为这就是你想要的？让我知道。
