爲什麼一切都顯示：塊？

這是OK：爲什麼一切都顯示：塊？

<html> 
<head> 
<title>tabs</title> 
<style> 
li { 
    display:inline; 
    margin:0 90px; 
    background:#777777 none repeat scroll 0 0; 
} 

li a { 
    padding:6px 12px; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
} 
</style> 

</head> 
<body> 
<div id="tabs"> 
    <div class="nav"> 
     <ul> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

但是，如果我改變li a，使之display:block，一切都過去了。爲什麼？

<html> 
<head> 
<title>tabs</title> 
<style> 
li { 
    display:inline; 
    margin:0 90px; 
    background:#777777 none repeat scroll 0 0; 
} 

li a { 
    padding:6px 12px; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
    display:block; 
} 
</style> 

</head> 
<body> 
<div id="tabs"> 
    <div class="nav"> 
     <ul> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

編輯：似乎填充：12px的6個像素這裏沒有all.But工作將它移入李將使填充甚至沒有（在IE），怎麼樣？

來源

2009-06-24 omg

嘗試浮動<李>離開，而不是內聯顯示它。

來源

2009-06-24 18:56:16 jeroen

謝謝您的回覆。但是第二個版本里的所有東西都在哪裏？很奇怪。 – omg 2009-06-24 18:59:16

我不確定，但給予內聯元素邊距沒有意義，因此組合將無法工作。 – jeroen 2009-06-24 19:03:04

啊，它不是真的，它顯示在李的下面，但是白色，所以你不會看到它。內聯元素與塊元素的行爲不同。 – jeroen 2009-06-24 19:06:08

更改顏色在li a定義。例如： -

li a { 
    padding:6px 12px; 
    color:red; 
    text-decoration:none; 
    font-weight:bold; 
    display:block; 
}

來源

2009-06-24 19:01:12 RedFilter

li { 

    margin:0 90px; 
    background:#777777 none repeat scroll 0 0; 
} 


li a { 
display:block;  
padding:6px 12px; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
}

來源

2009-06-24 19:09:56 Rony

您的代碼消失了，因爲你有塊元素（換行，並高度和寬度）內聯元素（不換行，並沒有高度或寬度）內。

它可以幫助審查的visual formatting model的W3頁面。

塊級元素在視覺上格式化爲塊 - 它們具有前後他們換行符。

內聯元素不形成新的內容塊。它們位於父塊級別元素的流程中。

當你在一個內聯元素塊元素，創建匿名盒（見我的鏈接頁面的部分9.2.1.1），每個瀏覽器不同的方式處理這種情況。

來源

2009-06-24 20:11:55 Emily

爲什麼一切都顯示：塊？

回答

相關問題