div タグの要素を折り返さずに、ページの使用可能なスペースを超えて拡張するにはどうすればよいですか?
たとえば、私は持っています:
<div class="container">
<div class="row">
<div class="child">1</div>
<div class="child">2</div>
...
<div class="child">19</div>
<div class="child">20</div>
</div>
<div class="row">
<div class="child">1</div>
<div class="child">2</div>
...
<div class="child">19</div>
<div class="child">20</div>
</div>
</div>
CSS:
.container{
overflow: scroll;
width: 100%;
}
.row {
clear: both;
}
実際の出力:
望ましい出力:
コンテナー要素の幅を 100% にしたいのですが、各行が折り返されないようにスクロール バーが必要です。
.row
要素に大きな任意の幅を設定すると、正しく機能することがわかりました。任意の幅を設定する以外にこれを行う別の方法はありますか? 幅は動的に変化するため、ハードコーディングされた幅は使用しない方がよいでしょう。
.row {
clear: both;
width: 2000px;
}
また、設定した任意の値が原因で、Safari のスクロール バーに矛盾があることにも気付きました。
Mac OS X の Chrome でのスクロール バーの不一致 (右端までスクロール):
Safari ではスクロール バーも表示されません。