vue.js 横スクロールメニュー を css だけで

横スクロールメニューやりてぇ。
やり方わからねぇ。

あ、CSSでいけるかも。
↑正解！

hoge.css

    .horizontal-list {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    .horizontal-list li {
        /* 横スクロール用 */
        display: inline-block;
    }

Hoge.vue

        <h2>人気占い師</h2>

        <ul class="horizontal-list">
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
        </ul>