导航栏-高度/间距问题

问题描述

| 我正在尝试使导航栏看起来像这样： 我无法正常工作，如何解决？

<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/