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）。然后我会做li所有的display: inline-block和width:32%。我还将结束标记从lis 中删除，以便它们之间没有不需要的空格。

jsFiddle