Question

我正在尝试创建一个CSS内联库。

HTML

<div id="wrapper">
    <ul>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
    </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  border: 0;
  -ms-interpolation-mode: bicubic;
  width: auto\9;
  height: auto;
}

html,
body {
    width: 100%;
    height: 100%;
}

#wrapper {
    width: 100%;
    background: grey;
    text-align: center;
    overflow: scroll;
}

ul {
    display: table;
    width: 100%;
    height: 50px;
    overflow: hidden;
}

li {
    display: table-cell;
    width: 100%;
}

Fiddle

我面临的问题是它不起作用（d'oh）。我们的想法是将#wrapper设置为width: 100%;，然后让图片在#wrapper内的一行中水平对齐。要在图像之间导航，可以使用水平滚动条。

但正如您所看到的，没有滚动条出现，只是隐藏了溢出在调试时，我发现img元素上的以下规则导致了问题：max-width: 100%;。如果删除它，则会出现滚动条，但图像不再居中。

由于它是一个自适应网站，我也不能简单地删除max-width: 100%;。所以基本上，我被困住了，不知道该怎么办。我甚至不知道为什么max-width: 100%;会弄乱滚动。

你能帮帮我吗？

编辑：所以在Safari 6.0.2。中，没有滚动条出现，但在Firefox 19.0.2中，一切似乎都很好。对我来说，事情变得陌生和陌生。

Answer 1

问题不在于每个人的狩猎，这是一个有效的解决方案：

http://jsfiddle.net/6fjV9/2/

#wrapper {
    width: 100%;
    background: grey;
    overflow: scroll;
}

ul {
    display: table;
    width: 2500px;
    height: 50px;
    table-layout: fixed;
}

li {
    display: table-cell;
    vertical-align: top;
}

img {
    display: block;
}

您将列表的宽度设置为其父级的100％，它只占用视口大小，因为它自己的宽度也是100％。该列表必须具有一行中所有子项的宽度，例如5 * 500 = 2500。虽然FF似乎只是将“表”调整为其内容（也许table-layout: fixed;是一个重要的样式属性），safari将其大小保持在100％，不会导致滚动条，因为它与其父级一样宽。

更新：或者只使用display：table设置无宽度。 http://jsfiddle.net/6fjV9/4/

CSS内联库/最大宽度：100％=不显示滚动条

1 个答案: