1

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

现代浏览器中的导航

这是我的 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>

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

这也发生在较旧的浏览器上。

谢谢你的时间！如果您需要更多信息，请询问！:)

破碎的导航

4

2 回答 2

2

  1. 省略<li class="navsep">并使用边框。

  2. 在元素上使用 lineheight li。

于 2012-10-26T21:02:31.877 回答
1

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

于 2012-10-26T20:58:32.273 回答