假設(shè)我有以下內(nèi)容:

<div style="border: 1px solid black; width:300px;">
<span style="background: red; width:100px;">one</span>
<span style="background: yellow; width:100px;">two</span>
<span style="background: red; width:100px;">three</span>
</div>

我可以應(yīng)用什么CSS來使跨度在div中等距分布？

# # #我不得不強(qiáng)烈反對其他答案，建議內(nèi)聯(lián)-塊和浮動:左，因?yàn)檫@些解決方案會給你一個浮動布局。大多數(shù)時候這可能沒問題，我見過33.33% + 33.33% + 33.33%的情況& gt100%，通常在安卓設(shè)備上。這會將最后一個單元格推到下一行。

由于您正在嘗試創(chuàng)建表格外觀，我建議使用表格顯示樣式:

#myTable {
            display: table;
            border: 1px solid black;
            width: 300px;
        }
        
        #myTable > * {
            display: table-cell;
            width: 33.33%;
        }

<div id="myTable">
  <span style="background: red">one</span>
  <span style="background: yellow">two</span>
  <span style="background: red">three</span>
</div>

# # #范圍是行內(nèi)元素，具有各自內(nèi)容的寬度。如果要設(shè)置特定的寬度，可以使用div或p這樣的塊元素，用float:left水平排列；

<div style="border: 1px solid black; width:300px;">
   <div style="float:left; background: red; width:100px;">one</div>
   <div style="float:left; background: yellow; width:100px;">two</div>
   <div style="float:left; background: red; width:100px;">three</div>
</div>

一般來說，span用于格式化，比如設(shè)置字體樣式等。像div這樣的塊元素可以用于布局和定位。

您可以調(diào)整跨度來做同樣的事情，但不建議這樣做。div就是為此而來的。

# # #嘗試添加“float:left；”適合你的風(fēng)格。

# # #除了前面的回答，我強(qiáng)烈建議不要在HTML中使用內(nèi)嵌樣式。你應(yīng)該試著把事情分開，樣式屬于你的CSS文件。

此外，嘗試研究網(wǎng)格系統(tǒng)，這使得這種格式化更加容易和可維護(hù)。好的例子有:

http://960.gs/

http://cssgrid.net/

或者

http://twitter.github.com/bootstrap/(一個完整的CSS框架，增加了一些額外的功能)

還有其他幾個，只是張貼這些作為例子。

# # #這應(yīng)該可以，去掉跨度中的每個100像素的寬度。默認(rèn)情況下，跨度是內(nèi)聯(lián)元素，因此直接對其應(yīng)用寬度屬性沒有任何效果。首先你必須“封鎖”他們。如果你對一些瀏覽器的顯示有問題:內(nèi)嵌塊；，可以用float:left；相反。