爲什麼不會的div坐直列

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

然後，我創建了一個測試頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css"> 
    p {display:inline} 

    .inline 
    { 
     display:inline; 
    } 
</style> 


<div style="display:inline;"> 

    <p>Hello</p> 

    <p>Pete</p> 

</div> 

<div class="inline"> 

    <div>Hello</div> 
    <div>Pete</div> 

</div> 

<div class="inline"> 

    <p>Hello</p> 
    <p>Pete</p> 

</div> 



</form>

但是，當我查看頁面我中間的兩個div不是內聯的，它們是一個接一個的。

什麼我不undestand是爲什麼第二個兩個元素arent內聯顯示？我的意思是他們不應該按照文章。段落和Div都是塊級別的，爲什麼只有段落元素「內聯」？

任何幫助非常感謝。

皮特

來源

2010-11-08 Exitos

第二個div中的div沒有類inline，因此不是內聯元素。如果你改變你的CSS定義爲：

div, p {display:inline}

然後，一切都會很好地坐在一條線上。

來源

2010-11-08 17:05:45

好的，但我認爲下面的兩個div應該繼承封閉div的樣式？多數民衆贊成如何工作不是嗎？所以這兩個內部div應該顯示：內聯設置他們不應該？ – Exitos 2010-11-10 08:20:41

@ user223863，你需要顯式地將'display'屬性設置爲'inherit'，以便內部div繼承該屬性。例如，如果繼承是自動的，那麼你的所有元素將具有與'body'元素相同的屬性。那麼如果你設置了'width：960px; margin：0 auto;'到'body'元素？你可能不希望這些屬性也適用於後代。 – 2010-11-10 09:00:29

嗨，好吧，是的，事情確實從身體繼承他們不？如果我在身體中設置字體，那麼我不希望必須在每個div中設置字體，他們只是繼承？ – Exitos 2010-11-10 16:51:29

你是無視div的目的。如果你想使用內聯元素，更好的選擇是去尋找<span>元素。

如果你想讓你的div並排顯示，你應該使用float。例如每個div有float:left。

來源

2010-11-08 17:01:26 Sarfraz

你需要把類在內的div：

<div class="inline">Hello</div> 
<div class="inline">Pete</div>

來源

2010-11-08 17:08:23

<div>標籤就其性質而言是塊級元素。除非你在你的CSS規則中特別說明，否則它們仍然如此。

您有兩種選擇。

編寫一個CSS規則，該規則匹配一個內聯類的邊界div內的每個div。例如

.inline div {display:inline}

但我建議不要這樣。

最佳選擇是將內聯類應用，因爲您已經寫入了要內聯顯示的每個div。例如

.inline {display:inline}

這種方法的好處是，你可以把這個類的任何元素，而不是指定一個新的規則，你希望內嵌顯示每個HTML元素。

順便說一句 - 你應該嘗試使用浮動而不是顯示你的div內聯。您可能會遇到顯示和定位問題，具體取決於您的內聯樣式div的信息量。

來源

2010-11-08 17:24:22 Kevin

爲什麼不會的div坐直列

回答

相關問題