html - 使链接在水平导航栏中居中

Question

第一次弄乱网格布局。这是我目前所拥有的:

http://fordsseafoodrockhall.com/marina/index.html#

我的问题是，如何使水平导航栏中的链接居中？可以看出，我在右侧留下了一点额外的空间，然后我在左侧。

HTML:

<div class="row">
    <div class="twelve columns">
        <ul class="nav-bar">
          <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Marina</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Amenities</a></li>
            <li><a href="#">Activities</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Yacht Club</a></li>
            <li><a href="#">Directions</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>

    </div>

CSS:

.nav-bar {
height: 40px;
background: #435d78;
margin-top: 20px;
padding: 0;
color: #fff;
text-align:center; }

Answer 1

将此添加到您现有的代码中:

.nav-bar {
    display: flex;
}

.nav-bar > li.active {
    flex-grow: 1;
}

flex-grow属性在应用了属性的兄弟元素之间分配可用空间。

在父级上设置 display:flex 以启用 flex 属性。