html - float 元素的 width auto 和 width 100% 之间的区别

Question

如difference between width auto and width 100 percent的答案中所述宽度 auto 占满宽度，但在这个 demo 中width auto 不占用全宽，但是当我们对其应用 100% 时，它只占用全宽。 width auto 实际上是如何取其元素的？

演示总结

html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS

ul{background-color: gray;}
li{background-color: red; float: left; clear: left; width: auto;}

Answer 1

问题是 li 元素上的 float 。

如果你像这样从你的 css 中删除 float 部分:

ul{background-color: gray;}
li{background-color: red; width: auto;}

然后它工作正常。