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 auto到中心ul。此解决方案不一定适用于动态生成的内容，因为需要硬编码的宽度，但尽管如此，这两种解决方案都适用于您的情况。

于 2013-11-06T03:13:07.670 回答