这是此主题的延续：Div Borders Affecting Padding。我的文字按照我想要的方式对齐，但现在我需要隐藏活动标签下方的黑线 - 就像这样http://i.imgur.com/jYMhP.png
来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta name="generator" content="" />
<title>
NCB
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link type="text/css" rel="stylesheet" href="http://joe-riggs.com/chip/style.css" />
</head>
<body>
<div class="top-margin"></div>
<div class="main">
<div class="top">
<div class="logo">
<a href="http://joe-riggs.com/chip"><img class="logo-link" src="http://joe-riggs.com/chip/images/logo.jpg" alt="logo" height="125px" width="250px" /></a>
</div>
<div class="nav-links" id="nav-links">
<ul id="nav">
<li class="filler-left"><a href="#"> </a>
</li>
<li class="about-active"><a href="http://joe-riggs.com/chip/">About</a>
</li>
<li class="process"><a href="http://joe-riggs.com/chip/process">Process</a>
</li>
<li class="projects"><a href="http://joe-riggs.com/chip/projects">Projects</a>
</li>
<li class="contact"><a href="http://joe-riggs.com/chip/contact">Contact</a>
</li>
<li class="filler"><a href="#"> </a>
</li>
</ul>
</div>
</div>
<div class="left">
<ul>
<li>Links</li>
</ul>
</div>
<div class="content">
<img src="images/architect.png" alt="me" style="float:left; padding-right:10px;" />
So this is the main page - the first page people will see when they come
to your page. A general overview would be nice. This text
can go over top of a faded background picture too.
<br />
<br />
Donec velit nibh, pellentesque in fringilla a, blandit id nibh. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam posuere mattis velit eget rhoncus. Maecenas
bibendum tristique dolor, nec varius nulla porta eget. Aenean turpis
ligula, ornare in consectetur vitae, aliquet id nulla. Vivamus bibendum
sapien id neque lacinia vel viverra ante luctus. Sed lacinia velit id
diam vulputate sollicitudin. Integer viverra libero vel enim dapibus
rutrum. Praesent vel ipsum tortor. Pellentesque porttitor ante sed
felis pretium nec rhoncus eros lacinia. Nam a massa nec sapien eleifend
condimentum. Fusce ut augue id libero condimentum facilisis.<br />
<br />
Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
id mauris consequat vel luctus quam vulputate. Duis in neque libero.
Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
euismod lacus id pulvinar.<br />
<br />
Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
id mauris consequat vel luctus quam vulputate. Duis in neque libero.
Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
euismod lacus id pulvinar.
</div>
<div class="footer">
<br />
copyright © 2010
</div>
</div><!--main-->
</body>
</html>
html,body{margin:0}
body {
font-family: "Lucida Grande", Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 140%;
color: #333333;
background-color: #eee;
}
div.content {
font-size: 80%;
background-color: #FFFFFF;
margin-left:200px;
padding:15px;
}
div.top-margin{
height: 15px ;
background-color:#000;
}
div.top{
/*border-bottom: 1px solid #000;*/
width:100%;
position: relative;
}
div.left{
float:left;
width:200px;
height:770px;
border-right: 1px solid #000;
font-size: 80%;
padding-top:20px;
}
div.body{
height: 770px;
background-color: #FFFFFF;
/*margin: 5px 5px 5px 5px;*/
padding: 6px;
font-size: 90%;
}
div.logo{
height:125px;
width:250px;
border-right: 1px solid #000;
/*border-bottom: 1px solid #000;*/
}
div.main{
width: 1100px ;
margin-left: auto ;
margin-right: auto ;
}
div.nav-links{
float:right;
position: absolute;
bottom: 0;
/* margin-left:250px;*/
margin-bottom: 0px;
width:100%;
border-bottom: solid 1px black;
}
div.header-link{
display:inline;
margin:0 30px 0 0;
}
.logo-link{
border-style: none;
}
div#nav-links ul li {
float:left;
overflow:hidden;
position:relative;
padding-left:15px;
padding-right:15px;
/*border-bottom: dotted 1px black;*/
/*border-top: solid 1px #EEE;*/
text-align:left;
border-top: solid 1px transparent; border-right: solid 1px transparent; border-left: solid 1px transparent;
}
ul#nav li.about-active {
border-left: solid 1px black;
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px white;
background-color:white;
}
ul#nav li.process-active {
border-left: solid 1px black;
border-top: solid 1px black;
border-right: solid 1px black;
background-color:white;
border-bottom: solid 1px white;
height:22px;
}
ul#nav li.projects-active {
border-left: solid 1px black;
border-top: solid 1px black;
border-right: solid 1px black;
background-color:white;
border-bottom: solid 1px white;
height:22px;
}
ul#nav li.contact-active {
border-left: solid 1px black;
border-top: solid 1px black;
border-right: solid 1px black;
background-color:white;
border-bottom: solid 1px white;
height:22px;
}
ul#nav li.about {
/*border-bottom: solid 1px black;*/
}
ul#nav li.process {
/*width:110px;*/
/* border-bottom: solid 1px black;*/
}
ul#nav li.projects {
/*width:110px;*/
/* border-bottom: solid 1px black;*/
}
ul#nav li.contact {
/*width:110px;*/
/*border-bottom: solid 1px black;*/
}
ul#nav li.filler-left {
/*border-bottom: solid 1px black;*/
border-left: solid 1px black;
border-top: solid 1px transparent;
padding-left:311px;
margin-left:210px;
/*width:305px;*/
}
ul#nav li.filler {
padding-right:20px;
/*border-bottom: solid 1px black;*/
/*width:10%;*/
width:25px;
}
ul#nav a {
text-decoration: none;
}
ul#nav a:hover {
text-decoration: none;
color:blue;
}
div.footer{
float:right;
font-size: 70%;
}
答案 0 :(得分：3)
再加上ricebowl的回答，
您可以将所有这4个选择器合并为一个。
将每个菜单标签li的class属性从'menuName-active'更改为'menuName active'。使用空格而不是 - 为元素提供'menuName'类和'active'类。该元素将不再具有'menuName-active'类。
由于每个菜单选项卡使用相同的样式，因此您可以使用此选择器：
ul#nav li.active{
background-color:white;
border-color:black black white;
border-style:solid;
border-width:1px;
height:22px;
margin-bottom:-1px;
padding-bottom:1px;
}
答案 1 :(得分：2)
与F.Aquino's answer类似，最简单的解决方案是，几乎可以肯定，移动你的.about-active来覆盖边界。不过，我个人会这样做：
.about-active {
padding-bottom: 1px;
margin-bottom: -1px;
}
padding-bottom强制.about-active元素向上内的文字一个像素（您尝试覆盖的边框宽度）{{1}将形状向下拉 1px，这样的想法是文本保持与剩余列表元素的水平对齐。
但无论哪种方式都可行。
答案 2 :(得分：0)
.about-active
{
position: relative;
bottom: -1px;
}