将<li>标签的长列表分成列？

Question

我有大约30名单<li>中<ul>.有没有办法,使用CSS,将这些分为三列十？

Answer 1

在CSS3中,这是可能的.

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

HTML:

<div id="columns">
  <ul>
... lots of lis ...
  </ul>
</div>

当列表项超过容器的高度时,列表项将溢出到下一列.

也许对于较旧的浏览器,您可以使用JavaScript,因为这似乎比一个关键功能更美观.

Answer 2

我通常将宽度设置为28%并向左浮动:

ul li {
   width: 28%;
   margin: .5em 2%;
   float:left;
}

这样做的缺点是项目填充如下:

- - -
- - -
-

不喜欢:

- - -
- -
- -

如果您想要垂直填充列,则需要3 <ul> s.