html 显图片宽度100,HTML – 如何显示内联几个> 100％宽度？

和其他人一样,我很难理解你正在寻找什么,但这样做你想做什么？

Horizontal 100% LIs

#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 */

• element 1
• element 2
• element 3

将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上的样式只是为了更清楚地显示正在发生的事情.)