0

タグを中央に配置する必要がありますが、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;
}

ここにフィドルがあります

助言がありますか？

4

2 に答える 2

0

フローティングされた要素を中央に配置する方法はありません。display:inlineLI をおよび#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;
}
于 2013-08-21T15:25:44.823 に答える