水平滚动溢出HTML <li>而不知道宽度

Question

http://jsfiddle.net/waitinforatrain/DSSPb/2/

我想安排一组<li>在水平可滚动容器中表示图像的元素,就像上面的例子一样.

到目前为止我看到的技巧将容器的宽度设置为<li>元素的宽度.但是,由于内容是动态的,我无法知道容器的宽度.

有没有办法用CSS而不知道容器宽度？

Answer 1

也许是这样的事情？http://jsfiddle.net/mattball/5JRdZ/

• 改变ul和li display对inline-block
• 去掉 li { float: left; }
• 添加ul { white-space: nowrap; }所以<li>当<ul>太窄时,s不会换行到下一行

现在你的问题是解决li { height: 100%; margin: 4px }导致<li>s高于s的问题<ul>.(这是解决方案:http://jsfiddle.net/mattball/avTgR/ :)