水平滚动溢出HTML< li>'而不知道宽度 [英] Horizontal scroll overflowing HTML <li>'s without knowing width

问题描述

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

我想安排一堆< li> 元素，代表水平可滚动容器中的图像，如上例所示。

I want to arrange a bunch of <li> elements which represent images in a horizontal scrollable container, like in the example above.

到目前为止，我看到的技巧是将容器的宽度设置为< li> 元素的宽度。但是，我无法知道容器的宽度是多少，因为内容是动态的。

The tricks I've seen so far set the width of the container to be the width of the <li>elements. However, I have no way of knowing what the width of the container will be because the content is dynamic.

有没有办法做到这一点与CSS不知道容器宽度？

Is there a way to do this with CSS without knowing the container width?

推荐答案

这样的东西，可能吗？ http://jsfiddle.net/mattball/5JRdZ/

Something like this, perhaps? http://jsfiddle.net/mattball/5JRdZ/

• 更改 ul 和 li 显示 inline-block


• remove li {float：left; }


• 添加 ul {white-space：nowrap;因此< li> 不会换行到下一行< ul> 太窄了 c $>

• change ul and li display to inline-block
• remove li { float: left; }
• add ul { white-space: nowrap; } so the <li>s don't wrap to the next line when the <ul> is too narrow

现在你的问题是解决 li {height：100％ margin：4px} 导致< li> 高于< ul> 。 （这里是解决方案： http://jsfiddle.net/mattball/avTgR/ ：）

Now your problem is solving the li { height: 100%; margin: 4px } causing the <li>s to be taller than the <ul>. (Here's the solution: http://jsfiddle.net/mattball/avTgR/ :)

这篇关于水平滚动溢出HTML< li>'而不知道宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！