對齊李菜單項中心

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/