如何使用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属性列数和其他类似但不知何故链接在一行中.(-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-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns.资料来源:MDN.