1

リスト項目を中央に配置できません。これがコードです。

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h1 class="menu-toggle">Menu</h1>
        <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

        <div class="menu-main-navigation-container">
              <ul id="menu-main-navigation" class="menu nav-menu">
                  <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12"><a href="#">Home</a></li>
                  <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="#">Music</a></li>
                  <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="#">Video</a></li>
                  <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Media Package</a></li>
                  </ul>
        </div>      
    </nav>

そしてこちらがCSSファイルです。

    .main-navigation {
    clear: both;
    width: 100%;
    text-align: center;
    margin: 0;
    }

   .main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }

    .main-navigation li {
    float: left;
    position: relative;
    display: inline;
     }

    .main-navigation a {
display: inline-block;
text-decoration: none;
    }

誰かが問題が発生した理由を簡単に説明できれば、私や他の人を助けるのに大いに役立ちます.

4

1 に答える 1

0

すでにtext-align:center親 ( .main-navigation) に設定しているので、以下を追加するだけです。

.menu-main-navigation-container {
    display: inline-block;
}

.main-navigation aからdisplay:inline-blockに変更display:block

.main-navigation a {
    display: block;
}

jsFiddleの例 - 中央揃えです。

または、定義済みの幅を に設定し、.を中央に.main-navigation追加することもできます。ハードコーディングされた幅が必要なため、このソリューションは動的に生成されたコンテンツに対して必ずしもうまく機能するとは限りませんが、それでも両方のソリューションが状況に応じて機能します。margin:0px autoul

于 2013-11-06T03:13:07.670 に答える