导航栏填充 'missing' 或 body BGcolor 'spilling' 进入导航栏
Navigation Bar Padding 'missing' or body BGcolor 'spilling' into navbar
我只是继续制作这个网站,突然我的一些导航栏填充变成了 'missing',我似乎无法查明错误。我已经玩过侦探游戏并评论了一些我认为干扰的东西。幸运的是,我在搞砸之前和之后都有一张原始照片。由于个人原因,某些 'paragraph text' 将是 'placeheld',我认为这无关紧要,除非需要它来解决问题。
-谢谢。
代码:
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>
您的问题存在是因为您将#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',我似乎无法查明错误。我已经玩过侦探游戏并评论了一些我认为干扰的东西。幸运的是,我在搞砸之前和之后都有一张原始照片。由于个人原因,某些 'paragraph text' 将是 'placeheld',我认为这无关紧要,除非需要它来解决问题。
-谢谢。
代码:
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>
您的问题存在是因为您将#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?