對齊中心UL/LI標籤

Question

我需要爲中心的ul/li標籤和我不能完全似乎得到它的工作。我想我錯過了一些簡單的事情！

<nav id="menu"> 
    <ul class="menu menu-dropdown"> 
     <li class="level1 item111 active current"><a href="/" class="level1 active current"><span>Services for Individuals</span></a></li> 
     <li class="level1 item112"><a href="/businesses-employers" class="level1"><span>Services for Businesses/Employers</span></a></li> 
     <li class="level1 item113"><a href="/local-government" class="level1"><span>Services for Local Government</span></a></li> 
    </ul> 
</nav> 

BODY { 
    font: normal 12px/18px Arial, Helvetica, sans-serif; 
    color: #666666; 
} 

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after,   .deepest:before, .deepest:after { 
content: ""; 
display: table; 
} 

.clearfix:after, .grid-block:after, .deepest:after { 
clear: both; 
} 

::selection { 
background: #7D994F; 
color: #FFF; 
} 

#logo, #logo > img, #menu { 
float: left; 
width: 100%; 
border: 1px solid black; 
} 

::selection { 
background: #7D994F; 
color: #FFF; 
} 

.menu-dropdown { 
margin: 0 15px; 
} 

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span { 
float: left; 
} 

.menu, .menu ul { 
margin: 0px; 
padding: 0px; 
list-style: none; 
} 

ul, menu, dir { 
display: block; 
list-style-type: disc; 
-webkit-margin-before: 1em; 
-webkit-margin-after: 1em; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 0px; 
-webkit-padding-start: 40px; 
} 

.menu-dropdown li { 
position: relative; 
} 

li { 
line-height: inherit; 
} 

user agent stylesheet li { 
display: list-item; 
text-align: -webkit-match-parent; 
} 

.menu-dropdown LI.active .level1 { 
color: #48B; 
} 

.menu-dropdown a.level1, .menu-dropdown span.level1 { 
font-family: "OpenSansLight"; 
font-size: 20px; 
} 

.menu a { 
text-decoration: none; 
} 

.menu a, .menu span { 
display: block; 
} 

.menu-dropdown A.level1 > SPAN, .menu-dropdown SPAN.level1 > SPAN { 
height: 50px; 
padding: 0 15px; 
line-height: 50px; 

font-size: 19px; 
} 

這裏是fiddle

有什麼建議？

Answer 1

有沒有辦法居中已浮動的元素。我通過將LI設置爲display:inline和#menu到text-align:center解決了此問題（我認爲...）。

http://jsfiddle.net/nQTkU/4/

BODY { 
font: normal 12px/18px Arial, Helvetica, sans-serif; 
color: #666666; 
} 

.wrapper { 
    max-width: 980px; 
} 

.wrapper { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: auto; 
} 

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after { 
    content: ""; 
    display: table; 
} 

.clearfix:after, .grid-block:after, .deepest:after { 
    clear: both; 
} 

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after { 
    content: ""; 
    display: table; 
} 

::selection { 
    background: #7D994F; 
    color: #FFF; 
} 

#logo, #logo > img, #menu { 
    float: left; 
    width: 100%; 
    border: 1px solid black; 
} 

::selection { 
    background: #7D994F; 
    color: #FFF; 
} 

.menu-dropdown { 
    margin: 0 15px; 
} 

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span { 

} 

.menu, .menu ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    text-align:center; 
} 

ul, menu, dir { 
    display: block; 
    list-style-type: disc; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    -webkit-padding-start: 40px; 
} 

.menu-dropdown li { 
    position: relative; 
} 

li { 
    line-height: inherit; 
    display:inline; 
} 

user agent stylesheetli { 
    display: list-item; 
    text-align: -webkit-match-parent; 
} 

.menu-dropdown LI.active .level1 { 
    color: #48B; 
} 

.menu-dropdown a.level1, .menu-dropdown span.level1 { 
    font-family: "OpenSansLight"; 
    font-size: 20px; 
} 

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span { 
    display:inline; 
} 

.menu a { 
    text-decoration: none; 
} 

.menu a, .menu span { 
    display: block; 
} 

.menu-dropdown A.level1 > SPAN, .menu-dropdown SPAN.level1 > SPAN { 
    height: 50px; 
    padding: 0 15px; 
    line-height: 50px; 

    font-size: 19px; 
} 
#menu { 
    text-align:center; 
} 

Answer 2

這是一種方式：

jsFiddle example

BODY { 
    font: normal 12px/18px Arial, Helvetica, sans-serif; 
    color: #666666; 
} 
.wrapper { 
    max-width: 980px; 
} 
.wrapper { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: auto; 
} 
.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after { 
    content:""; 
    display: table; 
} 
.clearfix:after, .grid-block:after, .deepest:after { 
    clear: both; 
} 
.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after, .deepest:before, .deepest:after { 
    content:""; 
    display: table; 
} 
::selection { 
    background: #7D994F; 
    color: #FFF; 
} 
#logo, #logo > img, #menu { 
    float: left; 
    width: 100%; 
    border: 1px solid black; 
} 
::selection { 
    background: #7D994F; 
    color: #FFF; 
} 
.menu-dropdown { 
    margin: 0 15px; 
    text-align:center; 
} 
.menu, .menu ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 
ul, menu, dir { 
    display: block; 
    list-style-type: disc; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    -webkit-padding-start: 40px; 
} 
.menu-dropdown li { 
    position: relative; 
    display:inline-block; 
} 
li { 
    line-height: inherit; 
} 
user agent stylesheetli { 
    display: list-item; 
    text-align: -webkit-match-parent; 
} 
.menu-dropdown LI.active .level1 { 
    color: #48B; 
} 
.menu-dropdown a.level1, .menu-dropdown span.level1 { 
    font-family:"OpenSansLight"; 
    font-size: 20px; display:block; 
} 

.menu a { 
    text-decoration: none; 
} 

.menu-dropdown A.level1 > SPAN, .menu-dropdown SPAN.level1 > SPAN { 
    height: 50px; 
    padding: 0 15px; 
    line-height: 50px; 
    font-size: 19px; 
}