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

有效吗？

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

Answer 2

如果没有高度属性则无关紧要。只需像往常一样使用border属性。

编辑：既然你提到你的容器div中有其他div，我怀疑你可能需要使用clear。如果您仍然遇到背景或边框没有延长容器长度的问题，请尝试在容器的结束div之前添加此权限：

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

Answer 3

只需在div中提供一些padding或内容。

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

css边界问题

3 个答案: