html - UL 要素をより多くの列に表示する

Question

1 つの UL の LI タグを複数の列に表示することは可能ですか?

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ネストされたulタグで取得できるようになりましたが、可能であれば素晴らしいと思います! 列を区切るためにいくつかのliタグが使用される場合でも、スタイルを設定する方法がわかりません。

Answer 1

それらを左にフロートさせ、n 個のアイテムごとにクリアすることが可能です。これは一定量の列をシミュレートし、IE9+ および他のすべてのブラウザーで機能します。

li{
    float: left;
}

li:nth-child(4n+1){ /*replace 4 with the number of columns*/
    clear: left;
}

JSFiddle

Answer 2

昔ながらのやり方。

CSS スタイル:

.ul li { float: left; margin-right: 20px; }

そして実装：

<div class="ul">
    <ul>
        <li>Col 1</li>
        <li>Col 2</li>
        <li>Col 3</li>
        <li>Col 4</li>
    </ul>
</div>