Question

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

A Full-Width Centered Navigation Top Bar - 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>

然后为第一个李添加了一个保证金：

 .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;
}

无法在Zurb基金会获得全宽中心导航顶栏

3 个答案: