为什么应用 css 宽度会导致该框下拉一行？
我意识到这个问题相当具体......我试图清楚地了解“宽度”对 css 盒模型的影响。
我在两个单选按钮的左侧有一个标签。标签向左浮动，单选按钮显示在标签的右侧。单选按钮本身的右侧有标签，并且这些标签可能很长。
无线电位于 UL 块中。
当我有 width:auto; 时在 UL 块上，然后将浏览器缩小到相当窄，单选按钮及其各自的标签就会下降到下一行。
如果我删除 width:auto，单选按钮将保持浮动，并且单选按钮旁边的标签字符串将继续缩小，这就是我想要的。
我的问题是：为什么 width:auto 会导致无线电及其标签下降一条线？是因为 width:auto 尝试创建一个容纳标签字符串全长而不流动文本的框吗？还是有其他事情在起作用？
以下是演示该行为的示例代码：
<style>
.inlineLabels ul{
float:left;
width: 66%;
padding: 0;
}
p.label{
float:left;
text-align:right;
position:relative;
width:32%;
margin: .3em 2% 0 0;
display:block;
}
ul.blockLabels{
/*width:auto; why does uncommenting this cause the radios to drop down to a new line when shrinking browser size? */
list-style:none;
}
</style>
<fieldset class="inlineLabels">
<div>
<p class="label">Choose:</p>
<ul class="blockLabels">
<li>
<label for="a-1">
<input name="a" id="a-1" value="0" type="radio"> <span class="">A short string</span>
</label>
</li>
<li>
<label for="a-2">
<input name="a" id="a-2" value="1" type="radio"> <span class="">A very very very very very very very very very very very very string</span>
</label>
</li>
</ul>
</div>
</fieldset>
I realize this question is rather specific... I'm trying to get my head clearly around the affects of "width" on the css box model.
I have a label to the left of two radio buttons. The label floats left, and the radio buttons appear to the right of the label. The radio buttons themselves have labels to the right of them, and these labels can be long.
The radios are in a UL block.
When I have width:auto; on the UL block, and then shrink the browser to be rather narrow, the radio buttons and their respective labels drop down to the next line.
If I remove the width:auto, the radio buttons remain floated and the label strings beside the radios continue to shrink, which is what I want.
My question is: Why would width:auto cause the radios and their labels to drop down a line? is it because width:auto attempts to create a box which accomodates the full length of the label strings without flowing the text? Or is something else at work?
Here's sample code which demonstrates the behavior:
<style>
.inlineLabels ul{
float:left;
width: 66%;
padding: 0;
}
p.label{
float:left;
text-align:right;
position:relative;
width:32%;
margin: .3em 2% 0 0;
display:block;
}
ul.blockLabels{
/*width:auto; why does uncommenting this cause the radios to drop down to a new line when shrinking browser size? */
list-style:none;
}
</style>
<fieldset class="inlineLabels">
<div>
<p class="label">Choose:</p>
<ul class="blockLabels">
<li>
<label for="a-1">
<input name="a" id="a-1" value="0" type="radio"> <span class="">A short string</span>
</label>
</li>
<li>
<label for="a-2">
<input name="a" id="a-2" value="1" type="radio"> <span class="">A very very very very very very very very very very very very string</span>
</label>
</li>
</ul>
</div>
</fieldset>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
TLDR：宽度为 auto 的浮动元素的“首选宽度”是没有换行符的内容的宽度。这就是为什么引擎将首先包裹浮动体，并且仅作为最后一步，它才会开始在浮动体中包裹文本。
您可以阅读规范中的答案： http://www.w3 .org/TR/CSS2/visudet.html#float-width
TLDR: the "preferred width" of floated elements with width auto is the width of the content without line breaks. That's why the engine will first wrap the float and only as a last measure it will start wrapping text within the float.
You can read the answer in the spec: http://www.w3.org/TR/CSS2/visudet.html#float-width
我想无论是否设置宽度，您可能都需要设置 LI 的样式。
I guess independent of setting a width or not, you probably need to style the LI.