css邊框問題

Question

如何在CSS中沒有設置高度的div上放置邊框？

想要實現這一點，而不使用任何JavaScript。代碼如下。

HTML

<div id="main_container"> 

<div id="header"> 

<div id="topMenu"> 
<ul id="topNav"> 
<li><a href="#">Home</a></li><li><a href="#">Contact</a></li><li><a href="#">Links</a></li> 
</ul> 
</div> 

<div id="mainMenu"> 
<ul id="mainNav"> 
<li ><a href="#">Home</a></li><li ><a href="#">About Us</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li><li ><a href="#">Multimedia</a></li> 
</ul> 
</div> 

</div> 

</div> 

CSS

body{ 
text-align:center; 
min-width:70%; 
} 

#main_container{ 
position:relative; 
width:980px; 
margin:auto; 
text-align:center; 
background-color:#FFFFFF; 
border-color: #999999; 
border-style: solid ; 
border-width: 1px ; 
margin-bottom: 20px; 
} 

#header{ 
position: relative; 
width: 980px; 
} 

#mainMenu{ 
float:left; 
width: 980px; 
top: 50px; 
background-color: #0099FF; 
height: 30px; 
} 

#mainNav{ 
text-align: left; 
} 

ul#mainNav li{ 
display: inline; 
margin: 0px 20px 0px 0px; 
} 

#topMenu{ 
width: 150px; 
top: 10px; 
text-align: right; 
float:right; 
margin-bottom: 20px; 
} 

ul#topNav li{ 
display: inline; 
margin: 0px 10px 0px 0px; 
} 


#footer{} 

在此先感謝。

Answer 1

如果沒有高度屬性，沒關係。正如您通常那樣使用border屬性。

編輯：既然你提到你的容器div裏面有其他div，我懷疑你可能需要使用clear。如果你仍然有任何背景或邊緣不延伸容器的長度問題，請嘗試容器的封閉DIV前加入這一權利：

<div style="clear:both"></div> 

Answer 2

它工作嗎？

<div style="border:1px solid #000"> 
Your content here 
</div> 

Answer 3

只要給裏面的div一些padding或內容。

div { 
    border: solid 1px #000; 
    padding: 10px; 
}