对于浮动元素，宽度auto和宽度之间的差异为100％

Question

正如difference between width auto and width 100 percent的答案中所指定的，宽度自动占据全宽，但在此demo中，宽度自动不占用整个宽度，但是当我们对此应用100％时，只需要全屏宽度。宽度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

试试这个

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;}

然后它运作正常。