Question

我正在尝试为我的网站构建一个简单的CSS导航栏。这在现代浏览器中运行良好：

Nav in modern Browser

这是我的CSS：

#nav{
    width:496px;
    height:45px;
    float:right;
    background-color:#bee199;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin-top:5px;
    border:1px solid #a09f9f;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
    #nav ul{
        list-style:none;
        text-align:center;
    }
    #nav ul .last{
        padding-right:0px;
        border-right:none;
    }
    #nav ul li.navsep{
        width:1px;
        height:44px;
        background-color:#a09f9f;
        padding:0;
        margin-right:10px;
    }
        #nav ul li{
            width:auto;
            height:44px;
            display: -moz-inline-stack;
            display:inline-block;
            padding-right:10px;
            margin-bottom:-16px;
        }
            #nav ul li a{
                font-family:Helvetica, Arial, sans-serif;
                font-size:20px;
                font-weight:400;
                text-decoration:none;
                color:#434342;
            }

HTML：

<div id="nav">
            <ul>
                <li><a href="principles.html" title="principles">Principles</a></li>
                <li class="navsep"><span></span></li>
                <li><a href="#edit" title="Our Services">Our services</a></li>
                <li class="navsep"><span></span></li>
                <li><a href="recent.html" title="Recent work">Recent work</a></li>
                <li class="navsep"><span></span></li>
                <li class="last"><a href="#edit" title="Contact Us">Contact</a></li>
            </ul>
</div>

我的一个问题是使用负边距，我真的不想使用它们。但每次我尝试使用传统方法时，文本都不会垂直居中，它看起来像这样：

这也适用于旧版浏览器。

感谢您的时间！如果您需要更多信息，请询问！：）

Broken Nav

Answer 1

省略<li class="navsep">并改为使用边框。
在li元素上使用lineheight。

Answer 2

而不是使用负边距使用行高，在您的情况#nav ul li {height: 44px; line-height: 44px;}中，这将使文本垂直居中

跨浏览器导航CSS

2 个答案: