html - 表のように見え、スクロールバー（画像を含む）を持つリストを実装する方法

Question

このようなリストを実装するにはどうすればよいですか。ご覧のとおり、3つの列が均等に分割されており、垂直スクロールバーがあります。

Answer 1

HTML

<ul>
<li>credit</li>
<li>card processing</li>
<li>credit report</li>
...
<li>etc</li>
</ul>

CSS

ul{width:600px;height:100px; overflow-y:scroll;}
li{float:left;width:192px;border:1px solid black;}
li:nth-chilr(n+3){border-top:0xp;}
li:nth-child(3n+2){border-width:1px 0px 1px 0px;}

フィドル

Answer 2

私は個人的にul固定の幅と高さを与え、それを与えますoverflow-y:auto;（またはscroll）。次に、lis を alldisplay: inline-blockと にしwidth:32%ます。また、終了タグをlis から外して、間に不要な空白が入らないようにします。

jsフィドル