基础顶部导航栏：增加宽度

Question

我正在使用Zurb Foundation制作导航栏，其中包含以下代码：

<div class="off-canvas-wrap full-height">
    <div class="inner-wrap full-height">
        <!---Top Bar for Large up-->
        <nav class="top-bar docs-bar show-for-large-up" data-topbar="">
            <section  class="top-bar-section">
                <ul>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                    <li><a href="#">TEST</a></li>
                    <li class = "divider"></li>
                </ul>
            </section> 
        </nav>

      <!--blah blah blah more code-->
    </div>
</div>

CSS：

.full-height{
height: 100%;
}
.top-bar{
background: #053f73;
}

.divider{
border-right: solid 2px #065eaa !important;
}

nav.top-bar{
text-align: center;
}

section.top-bar-section {
display: inline-block;
}

上述结果如下nav bar：

我希望nav elements保持居中，但扩展范围更广（即导航栏目前为440px wide，但我希望spread/centered跨越1200px }）。我怎样才能完成这个宽度变化？

Answer 1

如果这是一定数量的元素，为什么不将它们的宽度设置为百分比？

.top-bar-section ul{
    width:100%;
}
.top-bar-section ul li{
    width:14.43% /* 100/7 */
}
.top-bar-section ul li a{
    width:100%;
}