我有一个 <li>
的小结构在容器内,我要做的是强制 overflow-x
出现而不是 overflow-y
,但我无法实现这一点,我认为这是因为属性 float
以及我使用的百分比。
有什么方法可以达到这个结果吗?只显示水平溢出?
代码如下:
html
<div id="CockpitCenter">
<ul class="CockpitContainerResult">
<li><div class="box">Box 1</div></li>
<li><div class="box">Box 2</div></li>
<li><div class="box">Box 3</div></li>
<li style="height: 400px;">
<div class="box" style="height: 370px;">Box 4</div>
</li>
<li><div class="box">Box 5</div></li>
<li><div class="box">Box 6</div></li>
<li><div class="box">Box 7</div></li>
</ul>
</div>
和css
#CockpitCenter {
height: 500px; /* set only here in jsFiddle */
position: fixed;
left: 0;
border: solid 2px #ccc;
border-bottom: none;
overflow: auto;
}
div#CockpitCenter ul.CockpitContainerResult {
float: left;
width: 100%;
}
ul.CockpitContainerResult li {
margin: 5px 0;
height: 150px;
width: 50%;
float: left;
}
ul.CockpitContainerResult li:nth-child(even) {
float: right;
}
ul.CockpitContainerResult li div.box {
border: solid 1px #ccc;
margin: 15px;
border-radius: 20px;
height: 150px;
text-align: center;
}
这是一个demo
最佳答案
听起来您正在尝试制作轮播,有许多方便的 jquery 插件。无论如何,你不能使用宽度的百分比来做到这一点,你必须给你的主容器一个固定的宽度,然后给内部容器(你的 ul)你想要的任何更大的宽度。您必须在 UL 上强制设置宽度,否则 LI 元素将自动换行。完成后,只需将“overflow-x: auto”添加到主容器中,您就可以开始了。
快速示例,http://jsfiddle.net/ybJ6C/8/
我现在正在使用我的 ipad,并没有看到滚动条,但它确实在滚动。你会注意到滚动一直持续到最后,如果你知道你想要什么,你可以用宽度调整它。如果它是动态的,那么您将需要 js 根据其中的元素为您调整宽度。我也没有正确的高度,但足以理解这个想法。 (再次从我的 ipad 上这样做,编码不是最好的)
关于html - 使用百分比和 float 强制 overflow-x,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11566896/