css - 如何使用 CSS3 将链接列表拆分为 3 列？

Question

我有一个这样的链接列表:

<div id="linklist">
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
</div>

现在我想将它们分成 3 列，(在本例中)每列有 2 个链接。我知道有一个 CSS3 属性 column-count 和其他属性，但不知何故链接在一行中。 (如果稍后需要，我将添加 -webkit- 前缀。)

CSS:

#linklist a {
    display: inline-block;
    margin: 3px;
    padding: 4px;
    -moz-column-count: 2;
}

Answer 1

像这样的东西 jsFiddle ？

#linklist {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;  
}
#linklist a {
   display: block;
} 

CSS column-* 您可以使用的属性有:column-width, column-count, column-gap, column-rule, column -规则宽度、列规则样式、列规则颜色、列跨度、列填充、列。来源:MDN .