CSS列表边框底部间距问题

Question

我在使用CSS时遇到问题，似乎无法找出答案。

我有一些PHP：

<ul>
<?php if($page=="home"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/" alt="Home page">Home</a></li> 
<?php if($page=="about"){echo"<li class='active'>";}else{echo"<li>";}?><li><a href="http://www.trevorpeyton.com/about/" alt="Learn all about me">About</a></li> 
<?php if($page=="contact"){echo"<li class='active'>";}else{echo"<li>";}?><li><a href="http://www.trevorpeyton.com/contact/" alt="Contact me">Contact</a></li> 
<?php if($page=="projects"){echo"<li class='active'>";}else{echo"<li>";}?><li><a href="http://www.trevorpeyton.com/projects/"alt="View projects I am working on/completed">Projects</a></li> 
<?php if($page=="sites"){echo"<li class='active'>";}else{echo"<li>";}?><li><a href="http://www.trevorpeyton.com/sites/" alt="View websites I have made">Sites</a></li> 
<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><li><a href="http://www.trevorpeyton.com/demo/" alt="Demo the new user features">Demo</a></li> 
</ul> 

现在，在每个页面上将定义$page 。 问题是当页面处于活动状态时，它会在项目下方显示一个栏。 条形图浮动在页面的右侧，而主页项在最右侧。 如果那个是活跃的，那它就很好了。 当任何其他项目处于活动状态时，该行位于左侧。 这是我的CSS：

#header {
position:fixed;
background:#222;
color:#999;
width:100%;
margin:0px;
padding:0px;
top:0;
z-index:1;
height:5%;
}
#header ul li{
display: inline;
margin:0;
float:right;
display:block;
padding:5px 10px;
}
#header .active{
border-bottom: solid 3px orange;
}

对

错误

我知道这与间距有关，但是我无法弄清楚。 我不是CSS专家。

Answer 1

我猜您输出的内容超出了所需的<li>标签

<?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><li><a href="http://www.trevorpeyton.com/demo/" alt="Demo the new user features">Demo</a></li> 

这将输出

<li class='active'>
   <li><a href="http://www.trevorpeyton.com/demo/" alt="Demo the new user features">Demo</a></li> 

要么

<li>
   <li><a href="http://www.trevorpeyton.com/demo/" alt="Demo the new user features">Demo</a></li> 

所以看看这是不是问题

<ul>
    <?php if($page=="home"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/" alt="Home page">Home</a></li> 
    <?php if($page=="about"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/about/" alt="Learn all about me">About</a></li> 
    <?php if($page=="contact"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/contact/" alt="Contact me">Contact</a></li> 
    <?php if($page=="projects"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/projects/"alt="View projects I am working on/completed">Projects</a></li> 
    <?php if($page=="sites"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/sites/" alt="View websites I have made">Sites</a></li> 
    <?php if($page=="demo"){echo"<li class='active'>";}else{echo"<li>";}?><a href="http://www.trevorpeyton.com/demo/" alt="Demo the new user features">Demo</a></li> 
</ul>