什么阻止保证金在这里工作? http://jsfiddle.net/cq8VC/1/
我只是想让活跃的人在空中跳跃大约10px。
答案 0 :(得分:3)
好的,通过在列表项的内部元素周围添加一个span,如下所示:
<div id="navigation">
<ul id="links">
<li><a href="index.html"><span>Home</span></a></li>
<li><a class="active" href="projects.html"><span>Projects</span></a></li>
<li><a href="whyme.html"><span>Why Me?</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
通过将CSS更改为以下内容,您应该得到所需的结果:
#navigation ul#links li a.active{color:#1161A5; }
#navigation ul#links li a.active span { position: relative; top: -10px; }
#navigation ul#links li a{ font-family:LeagueGothicRegular;color:#ADC060;text-decoration:none;padding-left:10px;border-left:2px solid #1161A5;}
#navigation ul#links li a:hover,#navigation li:active{color:#1161A5;}
#navigation ul#links li:first-child a{border-left:none;}
#navigation ul#links li{float:left;font-size:1.5em;margin-left:10px;}
答案 1 :(得分:2)
这个怎么样:http://jsfiddle.net/vXaeP/1/
#navigation ul#links li{
padding-left:10px;
border-left:2px solid #1161A5;
float:left;
font-size:1.5em;
margin-left:10px;
}
#navigation ul#links li a{
font-family:LeagueGothicRegular;
color:#ADC060;
text-decoration:none;
}
#navigation ul#links li a.active{
color:#1161A5;
position: relative;
bottom: 10px;
}
#navigation ul#links li a:hover {
color:#1161A5;
}
#navigation ul#links li:first-child {
border-left: 0px;
}
<div id="navigation">
<ul id="links">
<li><a href="index.html">Home</a></li>
<li><a class="active" href="projects.html">Projects</a></li>
<li><a href="whyme.html">Why Me?</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
答案 2 :(得分:0)
也许可以使用:
#navigation ul#links li a.active{color:#1161A5;position:relative;top:-10px;}
(因为在内联元素上)
答案 3 :(得分:0)
我可以想象,margin-bottom不会推动内容,而只是推动其他所有内容。
你有没有尝试搞乱职位?尝试将位置:相对于
li {position:relative; } a:悬停{position:absolute;上:-10px; }
我还没有测试任何东西,所以不要抱它!哈!