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; 
}