对齐李菜单项中心

Question

我有我的回应的CSS菜单这个CSS代码：

nav, ul, li, a { 
    margin: 0; padding: 0; 
} 
a { 
    text-decoration: none; 
} 
.container { 
    width: 100%; 
    margin: 10px auto; 
} 
.toggleMenu { 
    display: none; 
    background: #666; 
    padding: 10px 15px; 
    color: #fff; 
} 
.nav { 
    list-style: none; 
    *zoom: 1; 
    background:#f36f25; 
} 
.nav:before,.nav:after { 
    content: " "; 
    display: table; 
} 
.nav:after { 
    clear: both; 
} 
.nav ul { 
    list-style: none; 
    width: 9em; 
} 
.nav a { 
    padding: 10px 15px; 
    color:#fff; 
} 
.nav li { 
    position: relative; 
} 
.nav > li { 
    float: left; 
    border-top: 1px solid #104336; 
} 
.nav > li > .parent { 
    background-image: url("images/downArrow.png"); 
    background-repeat: no-repeat; 
    background-position: right; 
} 
.nav > li > a { 
    display: block; 
} 
.nav li ul { 
    position: absolute; 
    left: -9999px; 
} 
.nav > li.hover > ul { 
    left: 0; 
} 
.nav li li.hover ul { 
    left: 100%; 
    top: 0; 
} 
.nav li li a { 
    display: block; 
    background: #1d7a62; 
    position: relative; 
    z-index:100; 
    border-top: 1px solid #175e4c; 
} 
.nav li li li a { 
    background:#249578; 
    z-index:200; 
    border-top: 1px solid #1d7a62; 
} 

@media screen and (max-width: 768px) { 
    .active { 
     display: block; 
    } 
    .nav > li { 
     float: none; 
    } 
    .nav > li > .parent { 
     background-position: 95% 50%; 
    } 
    .nav li li .parent { 
     background-image: url("images/downArrow.png"); 
     background-repeat: no-repeat; 
     background-position: 95% 50%; 
    } 
    .nav ul { 
     display: block; 
     width: 100%; 
    } 
    .nav > li.hover > ul , .nav li li.hover ul { 
     position: static; 
    } 

} 

，但我不能让菜单项菜单/页

这里的中心对齐是拨弄全码：

http://jsfiddle.net/5Z2QV/

Answer 1

是THIS FIDDLE你想要什么？
如果是这样，那么您必须从li中删除float并将display: inline-block添加到它们。然后，你必须添加text-align: center到.nav

.nav { 
    list-style: none; 
    background:#f36f25; 
    text-align: center; 
    border-top: 1px solid #104336; 
} 
.nav > li { 
    display: inline-block; 
} 

我也是从li取出border-top并把它放在.nav删除li S之间的差距。

编辑：
要保持左对齐子菜单项，添加此CSS：

.nav li { 
    text-align: left; 
} 

EDIT2：

你不需要这个adjustMenu() javascript函数。您可以使用media queries。稍微修改你的@media部分。添加这种风格：

.nav { 
    border-top: none; 
} 

和替换样式.nav > li此：

.nav > li { 
    display: block; 
    border-top: 1px solid #104336; 
} 

另外，我注意到，在小范围内的分辨率，一个菜单项分裂成新的生产线。为了防止这种情况，你可以将此样式添加到.nav

white-space: nowrap; 
overflow: hidden; 

这里的更新小提琴：http://jsfiddle.net/5Z2QV/9/