如何解决导航栏-高度/间距问题
| 我正在尝试使导航栏看起来像这样: 我无法正常工作,如何解决?<ul class=\"subnav\">
<li> <a href=\"\"> Text One</a></li>
<li> <a href=\"\"> Text Two</a></li>
<li> <a class=\"active\" href=\"\"> Text Three</a></li>
<li> <a href=\"\"> Text Four</a></li>
</ul>
<style>
.subnav {
list-style:none;
border-bottom:1px solid #c7c4ba;
}
.subnav li{
display:inline;
font-size:14px;
margin-right:1px;
}
.subnav a:hover {
background-color:white;
color:black;
}
.subnav a {
background-color:#c7c4ba;
color:white;
text-decoration: none;
}
.subnav .active {
background-color:white;
color:#c61c25;
border:1px solid #c7c4ba;
}
</style>
解决方法
这对您有用吗? http://jsfiddle.net/ypZqK/1/您想要的效果在那里,但是我不知道您希望其他事件如何出现。
CSS:
.subnav {
list-style:none;
border-bottom:1px solid #c7c4ba;
float:left;
}
.subnav li{
display:inline;
font-size:14px;
margin-right:1px;
float: left;
width: 100px;
height: 25px;
text-align: center;
border:1px solid #c7c4ba;
border-bottom: 0;
line-height: 25px;
background-color:#c7c4ba;
}
.subnav li:first-child{
margin-left: 25px;
}
.subnav a:hover {
background-color:white;
color:black;
}
.subnav a {
color:white;
text-decoration: none;
}
.subnav li.active {
background-color:white;
z-index:999;
}
.subnav li.active a{
color:#c61c25;
}
.clearBorder {
position: relative;
width: 100px;
bottom: 0;
background-color: white;
float: left;
height: 1px;
}
HTML:
<ul class=\"subnav\">
<li> <a href=\"\"> Text One</a></li>
<li> <a href=\"\"> Text Two</a></li>
<li class=\"active\"> <a href=\"\"> Text Three <span class=\"clearBorder\"</span></a></li>
<li> <a href=\"\"> Text Four</a></li>
</ul>
, 尝试这个
<ul class=\"subnav\">
<li><a href=\"\">Text One</a></li>
<li><a href=\"\">Text Two</a></li>
<li><a class=\"active\" href=\"\">Text Three</a></li>
<li><a href=\"\">Text Four</a></li>
</ul>
<style>
.subnav {
list-style:none;
padding:4px;
border-bottom:1px solid #c7c4ba;
}
.subnav li{
display:inline;
font-size:14px;
}
.subnav a:hover {
background-color:white;
color:black;
}
.subnav a {
background-color:#cccccc;
color:white;
text-decoration: none;
padding:4px;
}
.subnav .active {
background-color:white;
color:#c61c25;
border-left:1px solid #c7c4ba;
border-right:1px solid #c7c4ba;
border-top:1px solid #c7c4ba;
border-bottom:1px solid #ffffff;
}
</style>
http://htmledit.squarefree.com/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。