3

我有以下页面结构：

<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;  
}

但它不起作用...

提前致谢！

4

4 回答 4

5

span 标签上的display属性应该是**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

于 2012-06-22T11:50:30.270 回答
1

您必须指定display: inline-block属性，然后它将起作用。

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

于 2012-06-22T11:51:20.173 回答
1

尝试插入css：

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

然后在 HTML

<span class="cell"></span>
于 2012-06-22T11:54:45.630 回答
0

您的问题的答案是：width不适用于内联元素。除了你现在的风格，给你span的风格。display:inline-block

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

于 2012-06-22T11:54:33.903 回答