1

我正在尝试创建一个 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%;
}

小提琴

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

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

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

你能帮我么？

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

4

1 回答 1

2

每个人说的问题不是野生动物园，这是一个可行的解决方案：

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

You set your list's width to 100% of its parent, which just takes the viewport size, as its own width is also 100%. The list must have the width of all its children in a line, e.g. 5 * 500 = 2500. While FF seems to just resize the "table" to its content (maybe table-layout: fixed; is an important style property here), safari keeps its size at 100%, causing no scrollbars as it's just as wide as its parent.

Update: Or just set no width at all with display: table. http://jsfiddle.net/6fjV9/4/

于 2013-03-19T16:37:33.527 回答