CSS - 具有邊界更改的UL內聯LI塊（v）內聯？

我很困惑......所以我在容器裏面有一個UL，好像當我在UL上面改變一個DIV時，它影響到UL之後的流程......發生了什麼？CSS - 具有邊界更改的UL內聯LI塊（v）內聯？

DIV是一個塊元素，對吧？作爲一個UL，對嗎？

所以在這個例子中，如果你刪除了「header」DIV，它會改變H1元素在UL之後出現的方式......任何人都可以告訴我爲什麼？

我在IE8是...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Layout and CSS testing</title> 
<style type="text/css"> 
    body { 
     margin: 0px; 
     padding: 0px; 
     background-color: blue; 
    } 
    .container { 
     margin-left: auto; 
     margin-right: auto; 
     width: 600px; 
     background-color: green; 
    } 
    .navMenu { 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 
     background-color: red; 
    } 
    .navMenu li { 
     display:inline; 
     float: left; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="header"> 
     <img src="images/picture.gif" width="600" height="100" id="headerpic" border="0" /> 
    </div> 
    <ul class="navMenu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Next</a></li> 
     <li><a href="#">Last</a></li> 
    </ul> 
    <h1>First Header</h1> 
    <h2>Second header</h2> 
    <p>This is a paragraph</p> 
</div> 
</body> 
</html>

來源

2012-08-17 user1607577

的<h1>正在受到navMenu浮動，嘗試加入<div class="clearBoth"></div>收盤</ul>和<h1>像這樣之間：

HTML

</ul> 
<div class="clearBoth"></div> 
<h1>First Header</h1>

CSS

.clearBoth{ 
    clear:both; 
}

來源

2012-08-17 18:17:57 Keith

謝謝!!!由於我沒有在navMenu上定義浮點數，是否有某種默認浮點值？ – user1607577 2012-08-20 12:00:49

浮動在navMenu的列表項中定義爲更具體。默認情況下，它被關閉，但您的navMenu li有一個需要清除的float：left – Keith 2012-08-20 16:16:41

CSS - 具有邊界更改的UL內聯LI塊（v）內聯？

回答

相關問題