8

サムネイルをフィーチャーした div を作成して、幅 (330px) と高さ (100px) を設定し、コンテンツを水平に配置して、水平スクロール バーを使用してコンテンツを表示しようとしています。

私のウェブサイトの右下隅にあるサムネイルの列をご覧ください: http://stevenlloydarchitecture.co.nz/building.html

サムネイルのうち 4 つだけが表示され、横にスクロールすると他のサムネイルが表示されるようにしたいと考えています。

ただし、幅を指定しようとすると、サムネイルが互いに下に移動します (現在表示されているように)。幅と高さを設定する親 Div (私の例では id "slider") を作成しようとしましたが、水平スクロールを強制することを期待して、div に幅、高さ、オーバーフローを指定する組み合わせをできるだけ多く試しましたが、何もありませんでした働いて、私は完全に困惑しています。ヒントをお寄せいただきありがとうございます。

4

3 に答える 3

11

次のスタイルを#sliderdivに追加して、画像をスクロールする水平スクロールバーのみを取得できます。その後、そのサイズと配置だけdivです。プロパティは、white-space: nowrap次の「行」に折り返さないように画像に指示します。

#slider {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#thumbset {
    overflow: visible;
}
于 2013-02-25T06:02:26.290 に答える
10

次の css を試すことができます。

#slider  {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}

#thumbset {
width: 550px;// whatever width you want
}
于 2013-02-25T06:07:00.617 に答える
0

次のコードを使用します。

<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
  Here's a random text .............
</div>

このフィドルでこのコードがどのように機能するかを確認してください。簡単な方法です。水平スクロールバーを追加します

于 2015-08-12T14:13:35.707 に答える