水平滚动溢出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
/ code>到
inline-block
- remove
li {float:left; }
- 添加
ul {white-space:nowrap;因此
< li>
不会换行到下一行< ul>
太窄
- change
ul
andli
display
toinline-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屋!