水平滚动图像列表

Question

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

我目前的标记/ CSS工作,但这是我不喜欢它:

• 当前标记指定了一个非常宽的ul(即10000px)和一个在其上滚动的容器.有没有办法避免这种情况,而是根据其内容扩展宽度(即蓝色背景不应该在那里)？
• 有两个外来divS(那些ID #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

首先检查浏览器兼容性(你可能没问题),并根据需要添加前缀.

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中的技巧是将lis 设置为display: inline,因此它们被视为字符并彼此相邻放置,并设置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;
}

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