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

Question

我在<li>中有一个约30 <ul>的列表。有没有办法，使用CSS，将这些列分成三列十个？

Answer 1

在CSS3中，这是possible。

#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＆lt; ul＆gt; s。

Answer 3

在Alistapart中有一篇关于多列列表的文章。可能会有帮助。

Answer 4

以下内容适合移动设备使用。

＆＃13;

＆＃13;

div.a {
  background-color: #ffffff;
  border: 2px solid;
  margin: 0;
  overflow: auto;
  padding: 1%;
  text-align: left;
  word-wrap: break-word;
}
ul.a {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li.spacea {
  float: left;
  width: 2%;
}
li.thirda {
  color: #ff00ff;
  float: left;
  width: 32%;
}
li.thirdb {
  color: #ffff00;
  float: left;
  width: 32%;
}
li.thirdc {
  color: #00ffff;
  float: left;
  width: 32%;
}

＆＃13;

<div class="a">
  <ul class="a">
    <li class="thirda">
      The quick brown fox jumped over the lazy dog.
    </li>
    <li class="spacea">
      &nbsp;
    </li>
    <li class="thirdb">
      The quick brown fox jumped over the lazy dog.
    </li>
    <li class="spacea">
      &nbsp;
    </li>
    <li class="thirdc">
      The quick brown fox jumped over the lazy dog.
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;