我在使用这段 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
。问题是当页面处于事件状态时,它会在元素下方显示一个栏。该栏 float 到页面的右侧,主页元素在最右侧。如果那个是活跃的那么它工作得很好。当任何其他元素处于事件状态时,该行位于左侧。这是我的 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>
关于php - CSS列表边框底部间距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17707751/