<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 >element 1</li><li >element 2</li><li >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上的样式只是为了更清楚地显示正在发生的事情.)
总结以上是内存溢出为你收集整理的HTML – 如何显示内联几个> 100％宽度？全部内容，希望文章能够帮你解决HTML – 如何显示内联几个> 100％宽度？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）