尝试制作类似 this image 的东西.
所以，它就像一个 jQuery 轮播，但不使用 jQuery，不需要任何动画，只需要简单的分页来移动“可见”部分。
这是目前的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.container {
width:480px;
height:70px;
background:#ff0000;
overflow:hidden;
}
.container ul {
list-style-type:none;
display:block;
margin:0;
padding:0;
width:auto;
}
.container ul li {
float:left;
display:inline;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
<li><img src="image.png" /></li>
</ul>
</div>
</body>
</html>
当前的问题是，一旦 ul 达到 .container 的宽度，它就会断开并变成 2 行。我需要 ul 拉伸(stretch)，只是一行，并被容器遮盖。
我们从数据库中提取了不确定数量的图像，因此总是会改变 ul 的宽度。容器宽度和 li 宽度将始终相同。
我想不通，我想避免使用 jQuery/Javascript。
最佳答案
您可以使用 inline-block 来实现这一点。使用它们时，您可以将 white-space: nowrap 添加到父级，这样它们就不会跳到新行上，您可以使用例如第一个 上的负边距来滚动它李.
在这里，我为您创建了显示此行为的 fiddle :http://jsfiddle.net/kizu/qrmC5/
此外，不要忘记针对 IE 的 display:inline;zoom:1; 修复，将此添加到您的 block-lever inline-block 条件注释中.
关于html - 具有不同宽度的单行 ul 的 CSS 容器掩码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7590961/