html - 在 Zurb Foundation 中无法获得全宽居中导航顶部栏

Question

这个问题在这里得到了回答：

全宽居中导航顶栏 - Zurb Foundation

我尝试了这个解决方案，但它似乎不起作用——我只看到左边的物品在左边，右边的物品在右边。我希望它们在行内居中。

我所拥有的是：

    <div class="row">
    <div class="contain-to-grid">
        <nav class="top-bar">
            <ul class="title-area">
                <li class="name">
                    <!--none-->
                </li>
            </ul>
            <section class="top-bar-section">
                <ul class="left">
                    <li><a href="#">Link 1</a>
                    </li>
                    <li><a href="#">Link 2</a>
                    </li>
                </ul>
                <ul class="right">
                    <li><a href="#">Link 3</a>
                    </li>
                    <li><a href="#">Link 4</a>
                    </li>
                </ul>
            </section>
        </nav>
    </div>
</div> 

我在这里做了一个 jsFiddle：http: //jsfiddle.net/SxTty/

您需要使结果更大才能看到菜单。全屏结果在：http: //jsfiddle.net/SxTty/embedded/result/

Answer 1

好吧，我得到了一些“足够好”的东西，但我当然不喜欢它。

我取出了从“右”到“左”的移动项目并删除了“右”列表

  <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </section>

然后在第一个 li 上添加一个边距：

 .top-bar  li:first-child {

     margin-left: 150px;
 }

那行得通——我可以把左边距移过去。但是这个解决方案对我来说似乎太老套了。

这是最新的jsFiddle：

http://jsfiddle.net/squarepegsys/QKpBW/5/

我更愿意招待更好的东西。

Answer 2

尝试删除left该类并使列表成为内联块（然后您可以将其居中）：

.top-bar-section {
    text-align: center;
}
.top-bar-section ul {
    display: inline-block;
}

http://jsfiddle.net/UmMY9/1/

Answer 3

应用这些样式：

.top-bar ul li {
    float:left;
    list-style:none;
    padding-left: 10px;
    margin-top:20px;
}


.top-bar {
    width:300px;
    margin:0 auto;
}