水平滚动图像列表

Question

我正在尝试创建一个水平滚动列表。当Javascript启用时，我将用一个花哨的版本替换它，但我希望标记和CSS在没有Javascript的情况下在合理的现代浏览器上看起来和工作正常（任何以任何方式使用Javascript的建议都是关闭的）。

我目前的标记/ css有效，但这是我不喜欢的：

• 当前标记指定一个非常宽的ul（即10000px）和一个在其上滚动的容器。 有没有办法避免这种情况，而是根据其内容扩展宽度（即蓝色背景不应该在那里）？
• 有两个无关的div s（标识为#extra1，#extra2），仅用于样式目的。 有没有办法消除这个额外的div？
• 如果没有足够的图像来填充页面宽度，滚动条应该会崩溃，但目前它不会因为我有一个非常宽的ul而无法折叠。
• <a>标签由水平列表分隔，我最好将它们保持在一起。 有没有办法让它们靠近并在CSS中干净地分开它们？

除此之外，您是否知道讨论此类事情的任何教程？我已经看过几个教程，它们展示了整个页面的滚动，我从中获取了一些想法，但我找不到任何展示滚动ul / ol元素的内容。

可能有用的额外信息：

• 页面的宽度是静态的（即不流畅/弹性布局）。
• 页面中的图像是从PHP动态生成的，图像数量可以更改。
• 缩略图的宽度定义明确。

简化实例：http://dl.dropbox.com/u/17261360/horiz.html

Answer 1

更新（2018年）：基于display: inline的原始解决方案现已超过7年。在今天的世界中，我会推荐使用flexbox方法，因为它可以让您完全控制图像之间出现的间隙。

---

使用flexbox

首先检查browser compatibility（你可能没问题），并根据需要添加前缀。

ul.images {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>

---

使用display: inline

这适用于我，在Firefox 4 beta 10中测试过，建议在IE中测试它：

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  display: inline;
}

<ul class="images">
  <!-- Inline styles added for demonstration purposes only. -->
  <li style="background-color: #dff">...</li>
  <li style="background-color: #fdf">...</li>
  <li style="background-color: #ffd">...</li>
</ul>

CSS中的技巧是将li设置为display: inline，因此将它们视为字符并彼此相邻放置，并在{{1}上设置white-space:nowrap所以没有完成换行。您无法在内联元素上指定大小，但它们将被拉伸以适合其中的ul元素。然后，在父img元素上滚动只是overflow-x: auto。

添加上一个/下一个按钮可以使用ul，也可以使用position:absolute或其他任何您喜欢的方法。

---

使用float:left

与之前的方法类似，但允许我们在每个单独的图像块上设置大小：

display: inline-block

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
}

ul.images li {
  display: inline-block;
  width: 150px;
  height: 150px;
}