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

Posted by on Thu, Jan 19, 2017

横スクロールしたい

<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/



comments powered by Disqus