html - 浮动元素的宽度自动和宽度 100% 之间的差异

Question

正如宽度自动和宽度 100% 之间的差异的答案中所指定的，宽度自动采用全宽，但在此演示中，宽度自动不采用全宽，但是当我们对此应用 100% 时，它只采用全宽。宽度自动如何实际获取其元素？

演示摘要

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

尝试这个

http://jsfiddle.net/p5bQP/1/

CSS

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

Answer 2

li问题在于元素上的浮动。

如果您像这样从 CSS 中删除浮动部分：

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

然后它工作正常。