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

navbar在标题内。因此padding确定距标题div的距离而不是顶部（正文）。然后降低导航栏和文本之间的距离，减少margin-bottom。将像素值设置为您想要的任何值。我把它设置为50

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

#header{
top:0;
}

保证金底部编辑标题？

2 个答案: