边距底部编辑标题

Question

我试图使 #navbar 降低，因此它似乎挂在标题的边缘，但是每当我编辑它以向下时，它只会使标题降低。我怎么能只让导航栏变低，让它看起来挂在标题的边缘？

法典：

http://www.codecademy.com/courseBlaster14854_53a1c3f8631fe99231000802_deleted_53a1c3f8631fe99231000802_deleted/codebits/gioGOU/edit

Answer 1

如果不将元素移出流，可以执行以下操作：

从标题中删除边框半径和背景并给 H1 一个类，将以下 CSS 移动到那里：

h1.heading{
  background-color: #3c4543;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

从标头中删除 CSS

#header {
  position: relative;
}

交换标题和导航栏：

<div id="header">
<h1 class="heading" align="center", style="font-family:cursive"><font size="7">Risebush</font></h1>
<div id="navbar">
<ul>
<li><a href=#">Home</li>
<li><a href=#">About Us</li>
<li><a href=#">Become a Member</li>
<li><a href=#">Contact Us</li>
<li><a href=#">Games</li>
<li><a href=#">Movies</li>
</ul>
</div>
</div>

Answer 2

#navbar{
padding-top: 50px;
  margin-bottom: -20px;
}

导航栏位于标题内。因此，padding确定与标头div 的距离，而不是与顶部（正文）的距离。然后，要降低导航栏和文本之间的距离，请减小底部边距。将像素值设置为所需的任何值。我把它设置为 50

此外，如果您希望标题不位于页面上方并且可见。改变

#header{
top:0;
}