0

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

全宽居中导航顶栏 - 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/

4

3 回答 3

0

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

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

  <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/

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

于 2013-09-06T16:29:46.887 回答
0

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

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

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

于 2013-09-07T02:20:02.560 回答
-1

应用这些样式:

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


.top-bar {
    width:300px;
    margin:0 auto;
}
于 2013-09-06T14:39:15.443 回答