很抱歉再次请求 css 帮助,但我真的无法得到这个。我的问题是子 div 超出了上 div 的区域。我尝试使用:
display: inline-block;`
但这会使外部 div 发疯。
我的问题:
有一个 id 为侧边栏的 div,其中包含左侧框。它位于另一个 id 为 main 的 div 中。
html:
<div id="main">
<div id="sidebar">
<div id="box">
<h3>Recently Uploaded</h3>
<ul>
<li><a href="#">402 Base</a></li>
<li><a href="#">heli mod</a></li>
<li><a href="#">mw2 menu 1.14</a></li>
<li><a href="#">402 Base</a></li>
<li><a href="#">heli mod</a></li>
<li><a href="#">mw2 menu 1.14</a></li>
<li><a href="#">402 Base</a></li>
<li><a href="#">heli mod</a></li>
<li><a href="#">mw2 menu 1.14</a></li>
<li><a href="#">402 Base</a></li>
</ul>
</div>
...
CSS:
#main
{
width: 80%;
height: 100%;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .4);
margin-left: auto;
margin-right: auto;
}
#sidebar
{
height: 100%;
width: 20%;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 60px;
}
#box
{
/* min-width: 12em; idk if I wanted this */
width: 100%;
background-color: #F8F8F8;
border: 1px solid #000;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#box p
{
padding: 10px;
}
#box h3
{
margin: 0;
margin-top: 5px;
padding-left: 10px;
border-bottom: 1px solid #000;
font-size: 12pt;
font-weight:bold;
}
#box ul
{
font-size: 10pt;
margin: 0;
padding: 0;
list-style: none;
}
#box ul li
{
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #000;
}
我能做什么?:(