我有以下html：
<div id="container">
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</div>
应用css如下：
#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }
所以现在我希望有一个不确定数量的元素(< li>)都具有100％宽度(因此它们可以根据浏览器的窗口大小进行调整)但是并排显示,在容器中显示水平滚动条.
我试过在ul的css上放“display：inline”,在li的css上放“float：left”,但没有成功.
有什么建议么？
另外,请尝试考虑我尽量使其成为“跨浏览器兼容”.
提前致谢.
解决方法
和其他人一样,我很难理解你正在寻找什么,但这样做你想做什么？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontal 100% LIs</title>
<style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; } /* IE6 hack */
* html #container { padding-bottom:17px;} /* IE6 hack */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; } /* IE7 hack */
</style>
</head>
<body>
<div id="container">
<ul>
<li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
</ul>
</div>
</body>
</html>
将LI放在一行有两部分. ul上的白色空间：nowrap会停止任何自动换行和显示：LI上的内联块允许它们一个接一个地运行,但是在它们上面设置了宽度,填充和边距.对于符合标准的浏览器来说已经足够了.
但是IE6和IE7需要特殊处理.它们不支持显示：内联块正确,但幸运的是显示：带有hasLayout set的内联元素给出的行为非常类似于display：inline-block.宽度：100％已经强制在LI上设置hasLayout,因此我们所要做的就是指示显示：仅内联到IE6和IE7.有很多方法可以做到这一点(条件评论在StackOverflow上很流行)但是在这里我选择了* html和*：first-child html hacks来完成这项工作.
此外,IE6和IE7还有另一个错误,滚动条覆盖内容,因此容器有一个填充底部,为滚动条腾出空间.滚动条是一个平台控件,因此无法准确知道其高度,但大多数情况下17像素似乎都有效.
最后,IE7还想放入一个垂直滚动条,因此针对IE7的overflow-y：hidden会阻止这种情况发生.
(填充：0,边距：0,列表样式：无,并且各个LI上的样式只是为了更清楚地显示正在发生的事情.)
