Question

我只是继续创建这个网站，突然间我的一些导航栏填充“缺失”＃39;而我似乎无法确定错误。我已经玩过侦探游戏并评论了一些我认为干扰的东西。幸运的是，在搞砸之前我有一张原始照片。一些＆＃39;段文字＆＃39;将被置于＆＃39;出于个人原因，我认为这是无关紧要的，除非为了解决问题需要它。

-Thanks。

图片之前和之后：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像素。将填充添加到元素时，会使其大于ul元素。这可以通过更新两行代码轻松解决。

首先，从css中删除：

#nav{ height:40px; }

然后，在ul之后添加到html但在关闭nav div之前：

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

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

以下是明确属性的完美答案：What does the CSS rule clear: both do?

导航栏填充＆＃39;缺少＆＃39;或身体BGcolor＆＃39;溢出＆＃39;进入导航栏

1 个答案: