1

スクリーンショットを表示しようとしている水平ULメニューに問題があります...

Chromeでは完全に正常に動作します。
ここに画像の説明を入力してください

IE-8の場合と同様に、次のようになります。
ここに画像の説明を入力してください

これが私が持っているコードです：

<div class="navbar-top">
    <ul class="horizontal-menu">                    
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
        <li><a href="google"> Google </a> </li>
    </ul>           

</div>

およびCSS：

.horizontal-menu {
    width: 440px;
}

.horizontal-menu li {
    display: inline;
    list-style-type: none;
    padding-left: 40px;
}

手がかりはありますか？

本当に今私を困惑させている：p乾杯

ニック

4

1 に答える 1

1 
.horizontal-menu { white-space: nowrap }

li-elementsを1行に強制します。

パディングをそのようにしたい場合は、これで予期しない改行が修正されるはずです。

* { margin:0; padding: 0 }

いくつかのブラウザの不整合を修正できます。またはCSSリセットを統合する

ナビゲーションをすべてのブラウザの中央に配置するには、幅を削除して.horizontal-menu設定し、次の方法display: inlineで中央に配置しmargin: 0 autoます。

.horizontal-menu {
    display: inline;
    margin: 0 auto;
}

説明：
マージン：0自動; >>上/下マージン
マージン：0自動; >>左/右マージン。

于 2012-06-13T08:43:25.423 に答える