0

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

我在这里做到了：http: //jsfiddle.net/49REZ/

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在照片后显示带有大量可用空间的块。

4

3 回答 3

1

尝试将 css 替换为以下内容：

.wrapper ul {
    white-space: nowrap;
}

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

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

于 2013-04-18T13:02:04.847 回答
1

你可以试试这个：
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

于 2013-04-18T13:19:09.343 回答
-1

尝试将您的 10 000px 放在另一个母组件上，例如 div，或者直接放在 body

于 2013-04-18T12:07:11.870 回答