0

基本上我有一个容器 div 和一个标语 div。当我对标语 div 应用边距时，它也将其应用到容器 div 上，我不知道为什么。有人可以将我推向正确的方向，为什么它要移动父 div 吗？

HTML：

<div id="container">
<ul>
<a href=""><li>Home</li></a>
<a href=""><li>About</li></a>
<a href=""><li>School Sessions</li></a>
<a href=""><li>Summer</li></a>
<a href=""><li>Online Classes</li></a>
<a href=""><li>Register</li></a>
<a href=""><li>Contact</li></a>
</ul>
<div id="slogan">

</div>
</div>

CSS：

*{
    margin:0;
    padding:0;  
}
body{
    background: #7559a6;
    font-family: 'Open Sans', sans-serif;   
}
#container{
    position:relative;
    width:1000px;
    height:500px;
    margin:auto;
    background:white;
}
ul{
    position:absolute;
    right:0px;
    background:rgba(77, 77, 77, 0.75);  
    border-radius:12px;
    margin:25px 0px;
    padding:5px;
}
ul li{
    display:inline-block;   
    list-style:none;
    color:white;
    padding:5px 10px;
}
ul li a{
    text-decoration:none;   
    color:inherit;
}
#slogan{
    width:1000px;
    height:300px;
    background:blue;
    margin-top:50px;
}
4

4 回答 4

1

在这种情况下，最简单的方法是放入overflow: auto容器 div 的老式方法。

于 2013-05-23T04:02:26.220 回答
0

造成这种情况的主要原因是由于边距折叠的工作方式。您可以在此处阅读更多相关信息：http ://reference.sitepoint.com/css/collapsingmargins

你看到的额外空间实际上是你的口号的边缘。虽然边距折叠对于段落、列表项等非常有用，但在这里并没有多大意义。

基本上，您要做的是在容器顶部添加 1px 填充。

padding-top: 1px

此外，您可以添加具有相同效果的 1px 边框顶部规则。

border-top: 1px solid white

祝你好运！

于 2013-05-23T04:20:48.163 回答
0

用一个 div 包裹你的菜单，并给它一个至少 1px 的最小高度，这会导致它在文档流中占用一些空间，并且基本上会导致标语 div 清除到一个新行上。标语 div 现在将从菜单 div 中“下推”。

工作演示

HTML：

<div id="container">
    <div id="menu">
        <ul>
            <a href=""><li>Home</li></a>
            <a href=""><li>About</li></a>
            <a href=""><li>School Sessions</li></a>
            <a href=""><li>Summer</li></a>
            <a href=""><li>Online Classes</li></a>
            <a href=""><li>Register</li></a>
            <a href=""><li>Contact</li></a>
        </ul>
    </div>
    <div id="slogan">
        text
    </div>
</div>

CSS：

*{
    margin:0;
    padding:0;  
}
body{
    background: #7559a6;
    font-family: 'Open Sans', sans-serif;   
}
#container{
    position:relative;
    width:1000px;
    height:500px;
    margin:auto;
    background:white;
}
ul{
    position:absolute;
    right:0px;
    background:rgba(77, 77, 77, 0.75);  
    border-radius:12px;
    margin:25px 0px;
    padding:5px;
}
ul li{
    display:inline-block;   
    list-style:none;
    color:white;
    padding:5px 10px;
}
ul li a{
    text-decoration:none;   
    color:inherit;
}
#slogan{
    width:1000px;
    height:300px;
    background:blue;
    margin-top:50px;
}
#menu{
    min-height: 1px;
}
于 2013-05-23T03:44:10.437 回答
0

首先，令人震惊的是，您正在用锚标签包装 li。创建带有链接的列表的语义方式是这样的：

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

我认为您的代码中发生的情况是它以不同于通常预期的方式计算元素的边距。正如路人所建议的那样，搜索“保证金崩溃”。

我通常做的是浮动它：

float: left;

因此，只需将您的代码修改为此（添加更多边距）：

#slogan{
  width:1000px;
  height:300px;
  background:blue;
  margin-top:100px;
  float: left;  
}
于 2013-05-23T04:04:37.373 回答