如何使用CSS3将链接列表拆分为3列？ [英] How to split a list of links into 3 columns with CSS3?

问题描述

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

I have a link list like that:

<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 - 前缀。）

Now I want to have them in 3 columns with (in this example) 2 links per column. I know that there is a CSS3 property column-count and such others but somehow the links are in one single row. (I'll add the -webkit- prefix if needed later.)

CSS：

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

推荐答案

=http://jsfiddle.net/89JKM/ =noreferrer> jsFiddle ？

Something like this 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 - * 属性是：列宽，列数，列间距，列规则，列规则宽度，列规则样式，列规则颜色，列跨度，列填充，列。资料来源： MDN 。

TheCSS column-* properties you have at your disposal are: column-width, column-count, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns. Source: MDN.

这篇关于如何使用CSS3将链接列表拆分为3列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！