Html 具有小宽度和水平滚动条的块

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

我在这里做的：

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>

它在铬合金中工作良好

---

但是，它在Firefox中不起作用，因为它在照片后会显示

10000px

块，并有大量可用空间。

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

尝试用以下内容替换css：

.wrapper ul {
    white-space: nowrap;
}

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

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

  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;
  }  

---

列表样式类型：无可能会修复它。请把你的css和代码放在这里，所以希望答案可以重复使用，所以链接-free@Allendar
列表样式类型与此有什么关系？@Mr.Alien OP已从列表元素中删除所有基本样式。我只是指出，在他的例子中，列表样式可能仍在某种程度上干扰列表项的偏移量。@Allendar-Nah-Nah，这在这里没有用：）这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。@wazaminator如果我添加另一个包装并移动该属性，则效果相同。如果我把属性放得更高，DOM-scroller根本不起作用。@valex事实上，我做得很好，那么我不知道，是否有人可以投票否决这个答案，所以它会进入答案的底部…谢谢！我在考虑
display:inline块相反<代码>浮动：左，但这些图片之间的距离看起来很糟糕。有没有办法避免评论
还有另一种方法，就是将字体大小设置为0。退房
  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;
  }