Html 水平滚动的图像列表

Horizontally scrolling list of images

提问by Lie Ryan

I'm trying to create a horizontally scrolling list. I'm going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work fine without Javascript on reasonably modern browsers (any suggestions that uses Javascript in any way is off).

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

My current markup/css works, but here's what I don't like about it:

我当前的标记/css 有效，但这是我不喜欢它的地方：

• The current markup specify a very wide ul (i.e. 10000px) and a container that scrolls on this. Is there a way to avoid this and instead have the width expands based on its content (i.e. the blue background shouldn't be there)?
• There are two extraneous divs (those with id #extra1, #extra2) that is just for styling purpose. Is there a way to eliminate this extra div?
• If there is not enough image to fill the page width, the scrollbar should collapse, but currently it does not because I have a very wide ul which cannot collapse.
• The <a>tag are separated by the horizontal list, I preferably want to keep them together. Is there a way to have them close together and cleanly separate them in CSS?

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

Aside, do you know of any tutorials that discussed this sort of thing? I've seen several tutorials that demonstrated having the whole page to scroll, and I took some ideas from those, but I can't find any that demonstrated scrolling ul/ol element.

另外，你知道任何讨论这种事情的教程吗？我看过几个教程，展示了可以滚动整个页面，我从中汲取了一些想法，但我找不到任何演示滚动 ul/ol 元素的教程。

Extra info that might help:

可能有帮助的额外信息：

• The width of the page is static (i.e. it is notfluid/elastic layout).
• The images in the page is dynamically generated from PHP, and the number of images can change.
• The width of the thumbnails are well-defined.

• 页面的宽度是静态的（即它不是流体/弹性布局）。
• 页面中的图片是由PHP动态生成的，图片数量是可以变化的。
• 缩略图的宽度是明确定义的。

Stripped down live example: http://dl.dropbox.com/u/17261360/horiz.html

精简现场示例：http: //dl.dropbox.com/u/17261360/horiz.html

回答by Thomas

Update (2018): The original solution based on display: inlineis over 7 years old now. In today's world, I would recommend the flexbox approach, because it gives you full control over the gaps that appear between the images.

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

---

---

Using flexbox

使用弹性盒

Check browser compatibilityfirst (you're probably fine), and add prefixes as needed.

首先检查浏览器兼容性（您可能没问题），并根据需要添加前缀。

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>

---

---

Using display: inline

使用 display: inline

This works for me, tested in Firefox 4 beta 10, would be advisable to test it in IE as well:

这对我有用，在 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>

The trick in the CSS is to set the lis to display: inline, so they are treated as characters and placed next to each other, and set white-space:nowrapon the ulso that no line breaking is done. You cannot specify a size on inline elements, but they will be stretched to fit the imgelements inside them. The scrolling is then simply overflow-x: autoon the parent ulelement.

CSS 中的技巧是将lis设置为display: inline，因此它们被视为字符并彼此相邻放置，并设置white-space:nowrap在 上ul以便不进行换行。您不能为内联元素指定大小，但它们会被拉伸以适应其中的img元素。然后滚动只是overflow-x: auto在父ul元素上。

Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.

添加上一个/下一个按钮可以使用position:absolute、 或float:left或您喜欢的任何其他方法来完成。

---

---

Using display: inline-block

使用 display: inline-block

Similar to the previous approach, but allowing us to set a size on each individual image 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;
}

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