[英]CSS list border bottom spacing issue
我在使用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專家。
我猜您輸出的內容超出了所需的<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.