我的网页上有两条div之间有一条粗白线,每当我删除第二个div中的Main
时,白线就会消失。如何删除白线并保留<ul>
?我试过删除所有的CSS元素,但没有成功。即使空<ul>
,空间就在那里......
<ul>
&#13;
.header {
width: 100%;
height: 410px;
background-color: #040104;
text-align: center;
}
.nav {
width: 100%;
height: 50px;
background-color: #040104;
font-family: sans-serif;
text-align: center;
}
.nav li {
display: inline;
color: #ce5e27;
font-size: xx-large;
}
.nav ul li a {
padding: 1em;
color: #ce5e27;
text-decoration: none;
}
.contentContainer {
height: 600px;
background-color: #040104;
}
.content {
width: 60%;
height: 200%;
float: left;
background-color: #040104;
text-align: center;
}
.content h1 {
font-family: sans-serif;
font-size: x-large;
color: #ce5e27;
}
.thumbnail {
width: 40%;
height: 200%;
background-color: #040104;
float: right;
text-align: center;
}
.thumbnail h1 {
font-family: sans-serif;
font-size: large;
color: #ce5e27;
}
.footer {
clear: both;
width: 100%;
height: 60px;
background-color: black;
font-family: sans-serif;
text-align: center;
}
.footer li {
display: inline;
color: #ce5e27;
font-size: large;
}
.footer h1 {
color: #ce5e27;
font-size: small;
text-align: center;
font-family: sans-serif;
}
&#13;
答案 0 :(得分:6)
您的<ul>
自动带有保证金。将边距设置为0:
.nav ul{
margin-top: 0px;
}
答案 1 :(得分:0)
要摆脱白线,您可以将margin: 0
添加到ul
元素。
<强>演示:强>
.header {
width: 100%;
height: 410px;
background-color: #040104;
text-align: center;
}
ul {
margin: 0;
}
.nav {
width: 100%;
height: 50px;
background-color: #040104;
font-family: sans-serif;
text-align: center;
}
.nav li {
display: inline;
color: #ce5e27;
font-size: xx-large;
}
.nav ul li a {
padding: 1em;
color: #ce5e27;
text-decoration: none;
}
.contentContainer {
height: 600px;
background-color: #040104;
}
.content {
width: 60%;
height: 200%;
float: left;
background-color: #040104;
text-align: center;
}
.content h1 {
font-family: sans-serif;
font-size: x-large;
color: #ce5e27;
}
.thumbnail {
width: 40%;
height: 200%;
background-color: #040104;
float: right;
text-align: center;
}
.thumbnail h1 {
font-family: sans-serif;
font-size: large;
color: #ce5e27;
}
.footer {
clear: both;
width: 100%;
height: 60px;
background-color: black;
font-family: sans-serif;
text-align: center;
}
.footer li {
display: inline;
color: #ce5e27;
font-size: large;
}
.footer h1 {
color: #ce5e27;
font-size: small;
text-align: center;
font-family: sans-serif;
}
<div class="header">
<img src="images/basketball-rims-header.gif">
</div>
<div class="nav">
<ul>
<li> <a href="index.html">Home</a>
</li>
<li>|</li>
<li> <a href="http://www.nba.com/news/">News</a>
</li>
<li>|</li>
<li> <a href="http://stats.nba.com/players/?ls=iref:nba:gnav">Players</a>
</li>
<li>|</li>
<li> <a href="http://www.nba.com/teams/?ls=iref:nba:gnav">Teams</a>
</li>
<li>|</li>
</ul>
</div>