2

我对嵌套跨度以及 CSS 如何应用宽度属性有疑问。HTML 是这样的，'wide' 类设置宽度。box 类给它一个边框。仅当我将宽和框放在一起时才应用宽度。有人可以向我解释为什么会这样吗？我是 CSS 爱好者，也许这是我错过的一些基本规则。

<span class="wide"><span  class="box">Not wide</span></span>
<span class="wide box"><span>Wide</span></span>
<span><span class="wide box">Wide</span></span>
<span class="box"><span class="wide">Not wide</span></span>

你可以在这里看到效果：http: //jsfiddle.net/7hXUu/2/

感谢您的任何见解，亚伦

4

3 回答 3

1

原因是使用float:left;. 但我不知道究竟是什么原因造成的。

您可以span, a通过使用display:block;或为元素应用宽度display:inline-block;

于 2012-08-14T08:08:45.263 回答
1

宽度不能应用于内联元素，但是浮动内联元素的渲染行为是不同的：

如果'width'计算为'auto'，则使用的值是“收缩到适合”的宽度......那么收缩到适合的宽度是： min(max(preferred minimum width, available width), preferred width)

那不是全部。你的浮动容器跨越每个建立新的块格式化上下文，影响浮动元素定位的计算结果。如果有足够多的请求，我可能会逐步完成，但这绝对是一个不切实际的场景。

底线是：对于脑筋急转弯问题来说，这是一个很好的意大利面条代码，但在现实生活中使用起来很糟糕。

于 2012-08-14T10:30:26.473 回答
-1

该类box具有float: left，将元素转换为浮动元素，与默认span的 内联元素相反。该width属性不适用于内联元素。

对元素进行width应用的另一种方法是对其进行设置。spandisplay: inline-block

于 2012-08-14T08:08:24.320 回答