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>

私の問題の 1 つは、負のマージンを使用することです。実際には使用したくありません。しかし、従来の方法を使用しようとするたびに、テキストは垂直方向に中央に配置されず、次のようになります。

これは、古いブラウザでも発生します。

御時間ありがとうございます！さらに情報が必要な場合は、お問い合わせください。:)

壊れたナビ

4

2 に答える 2

2

  1. を省略して<li class="navsep">、代わりに境界線を使用してください。

  2. 要素に lineheight を使用しliます。

于 2012-10-26T21:02:31.877 に答える
1

負のマージンを使用する代わりに line-height を使用します。この場合#nav ul li {height: 44px; line-height: 44px;}、これによりテキストが垂直方向に中央揃えになります

于 2012-10-26T20:58:32.273 に答える