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**，因为 span标记默认为inline，我们需要它作为块。

只需将inline更改为inline-block，就像这样：

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

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

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

Answer 2

您必须指定display: inline-block属性，然后才能运行。

注意： <span>标记用于对文档中的内联元素进行分组，但您无法在内联元素上设置width或height。

Answer 3

尝试在css中插入：

 .cell{
display:inline-block; width: 60px;
    }

然后在HTML

中

<span class="cell"></span>

Answer 4

您的问题的答案是：width不适用于内联元素。提供span个除了你现在拥有的风格之外，还有display:inline-block的风格。

但你的问题还有更多。你不想使用桌子的理由是模糊的，并且听起来像你属于“从不使用桌子，因为桌子是邪恶的”人群。
不要落入那个陷阱。表很好。表很有用！当然，是的，他们可以被滥用，但你也可以滥用其他元素。你现在的做法是滥用<br>元素！

如何在仅使用CSS的<span>标签之间建立相同的距离？</span>

4 个答案: