基础(3)导航拉伸100%宽度

时间:2012-11-15 04:21:14

标签: html css zurb-foundation

我想知道当条形图一直延伸到整个屏幕时,是否可以让Zurb导航条项目的Foundation 3居中。我在导航上有6个项目,它们都在右侧。

<ul class="nav-bar">
   <!-- nav items... ect --> 
</ul>

感谢。

1 个答案:

答案 0 :(得分:1)

我无法制作偶数项目,但我设法让它看起来好多了,试试这个CSS for Foundation:

.nav-bar {  background: inherit; }
.nav-bar > li { background: #4d4d4d; border: 1px solid #333333; }
.nav-bar li {
    float: left;
}
.nav-bar > li > a:first-child {  padding: 0 12px; font-size: 14px; }
.nav-bar > li:last-child { border-right: 0px; -webkit-box-shadow: none; -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; }

.nav-bar > li:hover { background: #666; }