将链接居中在水平导航栏中

Question

第一次使用网格布局弄乱。这是我到目前为止所拥有的：

http:///fordseafoodrockhall.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属性。