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;
}

对齐中心UL / LI标签

2 个答案: