Question

我想制作一个充满大量照片的块。网页的宽度总是太小，所以我想添加一个水平滚动。

HTML

<div class="wrapper">
    <div class="photos">
        <ul>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
        </ul>
    </div>
</div>

CSS

.wrapper {
    width: 80%;
    margin: 10px auto;
}

.wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
}

ul, li {
    margin: 0;
    padding: 0;
}

.wrapper ul {
    width: 10000px;
}

ul li {
    list-style: none;
    float: left;
}

它在Chrome中运行良好。

但它在Firefox中效果不佳，因为它会在照片后显示10000px块，并且有很多可用空间。

Answer 1

尝试使用以下内容替换css：

.wrapper ul {
    white-space: nowrap;
}

ul li {
    list-style: none;
    display: inline-block;
}

http://jsfiddle.net/49REZ/4/

Answer 2

你可以试试这个：
HTML：

<ul class="images">
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
</ul>

CSS：

  ul.images {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    width: 500px;
    overflow-x: auto;
    background-color: #ddd;
  }
  ul.images li {
    display: inline;
    width: 150px;
    height: 150px;
  }

jsfiddle

Answer 3

尝试将10 000px放在另一个母组件上，例如div，或直接放在身体上

具有小宽度和水平卷轴的块

3 个答案: