导航栏填充 'missing' 或 body BGcolor 'spilling' 进入导航栏

Question

我只是继续制作这个网站，突然我的一些导航栏填充变成了 'missing'，我似乎无法查明错误。我已经玩过侦探游戏并评论了一些我认为干扰的东西。幸运的是，我在搞砸之前和之后都有一张原始照片。由于个人原因，某些 'paragraph text' 将是 'placeheld'，我认为这无关紧要，除非需要它来解决问题。

-谢谢。

前后图：http://imgur.com/a/ts1FS

代码：

CSS:

body {

background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;

}

p.desc{

text-indent: 50px;

}

h1 {
font-family: courier;
color: #ccad00;
}

h2 {

font-family: courier;
color: #ccad00;
text-align: center;


}

#divtitle {

width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}

h2

{
font-family:courier;
color: #99cc00;
}


p {

line-height: 1.9
text-size: 19px;

}


#nav {
  list-style: none;
  font-weight: bold;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  background-color: #ccad00;
  height:40px;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
#nav li {
  margin: 0px;

}
#nav li a {
  padding: 10px;
  text-decoration: none;
  font-weight: bold;
  color: #f2f2f2;
  background-color: #ccad00;
  float: left
}
#nav li a:hover {
  color:  #0d0d0d;
  background-color: #35af3b;
}

.button {
    background-color: #ffa600;
    border: none;
    color: #998200;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 40px;
    font-family: courier;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;

    }

.button:hover {

background-color: white;
color: #998200;

}

div#containerbttn { 
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}

ul.square{

list-style-type: square;

}

.center {

text-align: center;

}

html:

<div id="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Center</a>
    </li>
    <li><a href="#">Rules</a>
    </li>
    <li><a href="#">References</a>
    </li>
    <li><a href="#">Rankings</a>
  </ul>
</div>

<div>


 <div id="divtitle" >

<h1> text </h1>

</div> -->



<div id="containerbttn">

<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>

</div> 


<h2> Synopsis: </h2>

<div class="center">

<p class="desc"> Welcome to ***!. This is a free...

<ul class="square">

<li> some text </li>
<li> some text </li>

</ul>

<p class="desc" > text </p>

</div>
</html>

Answer 1

您的问题存在是因为您将#nav 元素的高度设置为 40 像素。当您将填充添加到您的 a 元素时，您使其大于 ul 元素。这可以通过更新两行代码轻松解决。

首先，从 css 中删除：

#nav{ height:40px; }

然后，添加到 html 在 ul 之后但在关闭导航之前 div:

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

这是您的工作页面的 jsfiddle：https://jsfiddle.net/8o279n5r/

关于 clear 属性的作用，这里有一个很好的答案：What does the CSS rule clear: both do?

导航栏填充 'missing' 或 body BGcolor 'spilling' 进入导航栏

Navigation Bar Padding 'missing' or body BGcolor 'spilling' into navbar

html

padding

nav