寬度DIV

我的HTML：寬度DIV

<table class="tab"> 
    <tr><td>aa</td><td>aa</td><td>aa</td></tr> 
    <tr><td colspan="3"><div class="in">bbb</div></td></tr> 
</table> 

<table class="tab"> 
    <tr><td>aa</td><td>aa</td><td>aa</td></tr> 
    <tr><td colspan="3"><div class="in">bbbbb</div></td></tr> 
</table>

我的CSS：

.tab td { 
    padding: 3px; 
    border: 1px solid red; 
} 

.in { 
    background-color: green 
}

我如何可以設置綠色背景具有相同的寬度爲文本在這個DIV，不是所有的TD？

LIVE：http://jsfiddle.net/xE4gS/

來源

2011-11-21 Peter Shootring

+1他們嘗試了一些東西。我們有代碼。他們（或者羅伊也許）添加了一個jsfiddle。對於我來說這似乎是非常合法的嘗試，而不僅僅是'寫我的代碼'。 –

下面的所有快速回復也可以。 –

如果我理解正確的話，你想要的綠色背景是相同的寬度作爲div文？

如果是這樣，請將div更改爲span。這是因爲div是塊級元素，並且意味着一行中只能出現一個元素，所以它會自動填充所有可用的水平空間。 inline元素，例如span允許將多個元素放置在一行上。

或者，可以使div內聯，如this fiddle

來源

2011-11-21 13:41:16

放在一個跨度，而不是一個div？假設這就是你想要的。

<table class="tab"> 
    <tr><td>aa</td><td>aa</td><td>aa</td></tr> 
    <tr><td colspan="3"><div><span class="in">bbb</span></div></td></tr> 
</table>

http://jsfiddle.net/infernalbadger/xE4gS/2/

來源

2011-11-21 13:40:02

謝謝，這是可以的，但是這隻適用於DIV嗎？ –

@PeterShootring你可以通過浮動來實現div，但是你需要使用其他黑客來擺脫浮動。跨度可能是最好的選擇。您可以使用jQuery腳本自動添加跨度。羅瑞斯的回答似乎是最好的。 –

添加文本跨度，而不是在DIV

<span class="in">xbbbb</span> 


span.in { 
background-color: green; 
}

來源

2011-11-21 13:40:34

如果您想要的顏色在綠色的背景與寬度相同的div內的文本，你可以在div更改爲跨度。

來自w3School：該標籤用於在文檔中對內聯元素進行分組。該標籤本身不提供視覺變化。該標籤提供了一種將鉤子添加到文本的一部分或文檔的一部分的方法。當文本掛在span元素中時，您可以將樣式添加到內容中，或者使用例如JavaScript處理內容。

http://www.w3schools.com/tags/tag_span.asp

來源

2011-11-21 13:44:24

回答

相關問題