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。

Answer 2

#linklist {
    -moz-column-count: 3;
}

#linklist a {
    display: block;
    margin: 3px;
    padding: 4px;
}

应该可行，但我还没有测试过。

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

2 个答案: