可水平滚动的一行画廊与CSS

Question

我想要一个水平可滚动的图库，就像图像上那样。

我目前的标记就是这个（很小。）：

.col-xs-12
  .row-fluid.clearfix
    ul.ace-thumbnails
      - @equipment_uses.each do |gear|
        = content_tag_for(:li, gear) do
          a.cboxElement data-rel="colorbox" href="#" title=("Photo Title")
            = image_tag gear.image, size: '80x80', alt: "150x150", class: 'img-thumbnail thumbnail'

如果我为.col-xs-12 div设置'overflow-x：scroll'，为'.row-fluid.clearfix'div设置'width：10000px'，那么它正在工作，但水平div太长了。我想将.row-fluid.clearfix的宽度扩展为图像的总宽度。

Answer 1

这不完全是一个答案，但this页面有一些关于这个主题的精彩教程，涵盖了几个不同的版本。我会留下评论而不是回答，但我的声誉阻止了这一点。

Answer 2

使用HTML＆amp; amp;的基本水平滚动图像列表CSS：

HTML：

<ul class="images">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul> 

CSS：

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

CSS中的技巧是将lis设置为display:inline，因此将它们视为字符并彼此相邻放置，并在ul上设置white-space:nowrap以便不进行换行。

滚动只是overflow-x:auto，其余部分显而易见。添加上一个/下一个按钮可以使用position:absolute，也可以使用float:left或其他任何您想要的方法。

See demo