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%;、画像を内側の1行に水平に配置すること#wrapperです。画像間を移動するには、水平スクロールバーを使用できます。

ただし、ご覧のとおり、スクロールバーは表示されず、オーバーフローは単に非表示になっています。
デバッグ中に、img要素に関する次のルールが問題の原因であることがわかりましたmax-width: 100%;。これを削除すると、スクロールバーは表示されますが、画像は中央に配置されなくなります。

レスポンシブサイトなので、簡単に削除することもできませんmax-width: 100%;。だから基本的に、私は立ち往生していて、それをするのかわかりません。max-width: 100%;なぜスクロールを台無しにするの かさえわかりません。

手伝ってくれませんか？

編集：Safari 6.0.2ではスクロールバーは表示されませんが、Firefox19.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;
}

リストの幅を親の 100% に設定すると、それ自体の幅も 100% になるため、ビューポートのサイズが適用されます。リストには、そのすべての子の幅が 1 行にある必要があります5 * 500 = 2500。FF は「テーブル」のサイズをコンテンツに合わせて変更しているように見えますが (table-layout: fixed;ここでは重要なスタイル プロパティである可能性があります)、サファリはサイズを 100% に維持し、親と同じ幅であるためスクロールバーを発生させません。

更新: または、display: table で幅をまったく設定しないでください。http://jsfiddle.net/6fjV9/4/

于 2013-03-19T16:37:33.527 に答える