如何使用CSS在<span>标签之间保持相同的距离？

Question

我有以下页面结构:

<span>content01</span>
<span>content02</span>
<span>content03</span>
<br/>
<span>content04</span>
<span>content05</span>
<span>content06</span>
<br/>
<span>content07</span>
<span>content08</span>
<span>content09</span>
<br/>
...

结果我的数据看起来像一个有三列的表.每个span标签的内容都是一个单词.但这看起来很歪,因为所有的词都不同而且长度不同.我想在每行的列之间保持相同的距离.我的问题可以通过使用一个容易解决table的标签或包装每个span单一div.但我想只使用CSS来实现所需的结果.这可能吗？例如,我试图使用以下内容:

span {
    width: 60px;
    height: 20px;
    padding: 40px;  
}

或者以下内容:

span {
    width: 60px;
    height: 20px;
    margin: 40px;  
}

但它不起作用......

提前致谢!

Answer 1

该显示屏上的跨度标签属性应该是**inline-block**,因为跨度标签是inline在默认情况下,我们需要它作为一个块为好.

所以简单地inline改成inline-block,像这样:

span {
    width: 60px;
    height: 20px;
    margin: 40px;
    display:inline-block;    
}

现场演示:http://jsfiddle.net/mAX59/

参考:http://reference.sitepoint.com/html/span