我有两个导航条,我希望彼此叠加,没有空格,但由于某种原因,有一个空行,好像我曾经使用过
.
HTML部分
<!DOCTYPE html>Logo!
<BR>
<ul class="menu">
<li><a href="#">Home</a>
</li>
<li><a href="#">placeholder</a>
</li>
<li><a href="#">placeholder</a>
</li>
<li><a href="#">placeholder</a>
</li>
<li><a href="#">placeholder</a>
</li>
<li><a href="#">placeholder</a>
</li>
</ul>
<ul class="submenu">
<li><a href="#">subheader1</a>
</li>
<li><a href="#">subheader2</a>
</li>
<li><a href="#">subheader3</a>
</li>
</ul>
CSS部分:
.submenu {
text-align: left;
background-color: #C2F0C2;
}
.menu {
background-color: #98bf21;
}
body {
width: 900px;
margin: 2em auto;
}
.menu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: center;
font-size:0;
}
.menu li {
display: inline;
list-style: none;
}
.menu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #FFFFFF;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #98bf21;
}
.menu a:hover, a:active {
background-color: #7A991A;
}
.submenu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: left;
font-size:0;
}
.submenu li {
display: inline;
list-style: none;
}
.submenu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #000000;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #C2F0C2;
}
.submenu a:hover, a:active {
background-color: #7A991A;
}
我不确定我需要改变哪一部分,所以我把它全部包括在内.
如何删除空行？
E:我用小提琴失败了,忘了按更新,现在应该有正确的.
申请padding:0和margin:0你的menu和submenu课程.
.menu, .submenu{margin:0; padding:0;}