使用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

使用 HTML 和 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，以便将它们视为字符并彼此相邻放置，并设置white-space:nowrapul 以便不进行换行。

滚动就很简单overflow-x:auto，其余的就很明显了。添加上一个/下一个按钮可以使用position:absolute、 或float:left或任何您喜欢的其他方法来完成。

查看演示

Answer 2

这不是一个确切的答案，但是此页面上有一些关于该主题的出色教程，涵盖了几个不同的版本。我本来会发表评论而不是回答，但是我的声誉阻止了这一点。