听起来并不简单。
我有一个水平滚动的div,其中的内容是动态的,可能会更改。
到目前为止,我设法做到的是使其在Webkit中正常运行,但是请尝试一下,无论在Firefox,Opera还是IE中,它都无法正常工作。
结构非常简单,一个容器,一个相对定位的父对象以及一个带有列表项的ul。
<div class="extra-holder">
<div class="extra-holder-inner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
.extra-holder {
height: 160px;
display: block;
width: 100%;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
z-index: 41;
line-height: 1;
background-color: white;
position: fixed;
border-bottom: 1px solid #d7d7d7;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}
.extra-holder-inner {
position: relative;
display: inline-block;
}
.extra-holder ul {
margin: 0;
padding: 0;
list-style: none;
}
.extra-holder ul li {
margin: 0;
padding: 0;
float: left;
height: 140px;
width: 300px;
white-space:normal;
border-left: 1px solid #d7d7d7;
margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
}
问题是,列表项似乎已包装好,我需要将它们全部放在用户可以滚动的一行中。
我做了一个jsfiddle,所以您可以有一个更好的主意。
http://jsfiddle.net/QFnVk/
在chrome中-可以向左/向右滚动
在firefox中-列表项显示的视口宽度尽可能多,然后堆叠在下方。
最佳答案
在您的.extra-holder ul li
规则中,尝试将float: left;
替换为display: inline-block;
这是您在Firefox中工作的updated fiddle
关于css - 水平滚动div和子元素的定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17025054/