· CSS Riot.js

CSSで横スクロールしたい + Riot.js

  • このエントリーをはてなブックマークに追加

横スクロールしたい

<ul>
    <li>要素1</li>
    <li>要素2</li>
    <li>要素3</li>
    <li>要素4</li>
</ul>

とHTMLがなっているとき

 /*画像リストを横スクロール*/
ul {
    overflow-x: scroll;
    white-space: nowrap;
}
li {
    display: inline-block;
    padding-right: 5px;
}

とする。 liはブロック要素なのでdisplay: inline-block;でインラインブロック化して横な並びになります。white-space: nowrap;で改行も半角スペースにすると横のサイズからはみ出て、それをoverflow-x: scroll;でスクロールさせます。

サンプル

https://embed.plnkr.co/awNm98DSBsyTar0sLnY3/

  • このエントリーをはてなブックマークに追加
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket