0

メニューを適切に中央に配置できないようです。誰かが問題を見ることができますか？

    ul#navigation {
        float: left;
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        min-width: 100px;
        background: #003d4c;
        padding-bottom: 15px;
        text-align: center;
    }

    ul#navigation li {

        border: 1px black solid;
        min-width: 100px;
        background-color: white;
        list-style-type: none;
        display: inline-block;
    }

    ul.sub_navigation {
        position: absolute;
        display: none;
    }

    ul.sub_navigation li {
        clear: both;
    }

    a, a:active, a:visited {
        display: block;
        padding: 10px;
    }

    #header{
        text-align: center;
        padding: 10px 20px;
    }

HTMLは次のとおりです。

<div id="container">
    <div id="header">
        <br />
        <ul id="navigation">
            <li class="dropdown"><a href="#"></a>
                <ul class="sub_navigation">
                    <li><a href="#">Sub Navigation 1</a></li>
                    <li><a href="#">Sub Navigation 2</a></li>
                    <li><a href="#">Sub Navigation 3</a></li>
                </ul>
            </li>
            ...
4

2 に答える 2

1

ナビゲーションを中央に配置することは一般的ですが、簡単な問題ではありません。特に、ブラウザ間で互換性を持たせたい場合はそうです。私がいつも使っているとても良いテクニックがありますが、それはこのページでとてもよく説明されています。

基本的にそれはこれに帰着します：

  • コンテナdivを左にフロートさせ、幅を100％、相対位置を指定します
  • あなたはあなたのulを左に浮かせ、それに50％の相対的な位置を残します
  • あなたはあなたの李を左に浮かせて、それに50％の相対的な右の位置を与えます

例を使ったスローの説明については、リンクを確認してください

于 2012-08-04T19:48:30.330 に答える
0

私が使用することにした解決策は、このCSSを使用してメインのulをdivでラップすることでした。

.menuContainer {
    display: table;
    margin: auto;
}
于 2012-08-06T01:57:30.153 に答える