LoginSignup
13

More than 5 years have passed since last update.

横並び表示で横スクロールバーを出すボックス

Posted at

<div class="parent">
<div class="child">
aaaa
</div>
<div class="child">
bbbb
</div>
</div>

.parent{overflow-x:auto; overflow-y:hidden; width:100%; white-space:nowrap;}
.child{display:inline-block; margin-right:1%; width:19%; vertical-align:top; white-space:normal;}

marginとwidthは適宜変更
white-spaceは親をnowrapすることで下に落とさないようにする。子はwidth内に表示させたいので、normalに戻す。
overflow-x,overflow-yは両方設定。webkit対策のため。
display:inline-blockで横に並べられる。vertical-align:topで上に合わせるよう並べる。

参考ページ
http://okazuki.hatenablog.com/entry/20130129/1359440307

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13