Question

尝试制作类似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来伸展，只需要一行，然后被容器遮住。

我们从数据库中提取了不确定数量的图像，因此始终会更改ul的宽度。容器宽度和li宽度将始终相同。

我无法解决这个问题，我想避免使用jQuery / Javascript。

Answer 1

您可以使用inline-block来实现此目的。使用它们时，您可以将white-space: nowrap添加到父级，这样它们就不会跳到新行上，您可以使用例如第一个li上的负边距滚动它。

在这里，我为您展示了这种行为：http://jsfiddle.net/kizu/qrmC5/

另外，不要忘记IE的display:inline;zoom:1;修正，在条件评论中添加阻止inline-block的块。

Answer 2

在渲染网页时，请使用<ul>属性直接在style上设置宽度。由于<li>宽度始终是常量，因此宽度将为：

number of images returned * li width

假设PHP是您的服务器端语言，它将是这样的：

<div class="container">
   <ul style="width: <?php echo $count_imgs * CONSTANT_WIDTH ?>px">
      // echo your image <li>'s
   </ul>
</div>

这是an example的工作原理。

如果在渲染页面时设置宽度不是一个选项，则可以在<ul>上定义任意大的宽度。它不会那么好，因为你最终会在列表末尾留出空白区域。

具有不同宽度的单行ul的CSS容器掩码

2 个答案: