小宽度和水平滚动块

Question

I want to make a block filled with a large number of photos in row. Width of web page is always too small, so I want to add a horizontal scrolling.

I made it here: 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;
}

It works fine in Chrome.

But it does not work well in Firefox, because it fairy displays 10000px block with a lot of free space after photos.

Answer 1

Try to replace the css with the following:

.wrapper ul {
    white-space: nowrap;
}

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

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

Answer 2

you can try this:
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

尝试将您的10000px放在另一个母组件上，例如div或直接放在主体上