Question

我对嵌套跨度以及CSS如何应用width属性有疑问。 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/

感谢您的任何见解，亚伦

Answer 1

原因是使用float:left;。但我不知道到底是什么原因。

您可以使用span, a或display:block;

为display:inline-block;等元素应用宽度

Answer 2

Widths cannot be applied to inline elements，但f loated inline elements的渲染行为不同：

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

这不是全部。您的浮动容器跨越每个容器会建立新的block formatting contexts，从而影响floated element positioning的计算结果。如果有足够的请求，我可以一步一步地检查它，但这绝对是一个不切实际的场景。

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

Answer 3

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

使width适用于span元素的另一种方法是在其上设置display: inline-block。

CSS嵌套跨度和宽度属性

3 个答案: