带有css的水平滚动单行画廊答案

【问题标题】：horizontally scrollable one line gallery with css带有css的水平滚动单行画廊
【发布时间】：2014-03-21 19:31:07
【问题描述】：

我想要一个像图片上的那样水平滚动的画廊。

我目前的标记是这样的（它很苗条。）：

.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 的宽度扩展到图像的总宽度。

【问题讨论】：

标签： html css slim-lang

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用 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，因此它们被视为字符并彼此相邻放置，并在ul 上设置white-space:nowrap，这样就不会进行换行。

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

See demo

【讨论】：