Question

我有一个菜单栏，我想要显示在中心，宽度为960px。但是我无法做到。我已经尝试向左浮动，直到自动，但它没有帮助我..

这是小提琴......

这是HTML ..

<div>
    <ul id="dropdown_nav" style="margin-left:auto; margin-right:auto; width:960px;">
        <li><a class="first" href="#" style="font-size: 12px;">Home</a></li>
        <li><a href="#" style="font-size: 12px;">Tutorials</a></li>
        <li><a href="#" style="font-size: 12px;">Artciles</a></li>
        <li><a href="#" style="font-size: 12px;">Freebies</a></li>
        <li><a class="last" href="#" style="font-size: 12px;">Other Stuff</a></li>
    </ul>
</div>

请帮帮我..

Answer 1

将display:block添加到

<ul id="dropdown_nav" style="margin-left:auto; margin-right:auto; width:960px;">

Answer 2

试试这个，

http://jsfiddle.net/iamrmin/4kLqS/1/embedded/result/

#dropdown_nav {
    width: 960px;
    margin: 0px auto;
    height: 35px;
    padding: 0px;
    /* display: inline-block; */
    list-style: none;
    -moz-box-shadow: inset 0px 0px 1px #fff;
    -webkit-box-shadow: inset 0px 0px 1px #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: lightgray;
}

Answer 3

我创造了一个小提琴，你可以检查。 Fiddle

HTML：

<div style="width:960px; height =200px; margin:0 auto;">
            <ul id="dropdown_nav">

                <li><a class="first" href="#" style="font-size: 12px;">Home</a></li>
                <li><a href="#" style="font-size: 12px;">Tutorials</a>
                </li>
                <li><a href="#" style="font-size: 12px;">Artciles</a>

                </li>
                <li><a href="#" style="font-size: 12px;">Freebies</a>
                </li>
                <li><a class="last" href="#" style="font-size: 12px;">Other Stuff</a>

                </li>
            </ul>
        </div>

CSS：

a {
    color:#525252;
    text-decoration:none;
}
#dropdown_nav {
    width:960px;
    height: 35px;
    margin:o auto;
    padding:0;
    padding:0px;
    display:inline-block;
    list-style:none;
    -moz-box-shadow:inset 0px 0px 1px #fff;
    -webkit-box-shadow:inset 0px 0px 1px #fff;
    border:1px solid #ccc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background: lightgray;
}
#dropdown_nav li {
    padding-top: 4px;
    float:left;
    position:relative;
    display:inline-block;
}
#dropdown_nav li a {
    padding:12px 45px 10px 45px;
    border-right:1px solid #ccc;

}
#dropdown_nav li a:hover {
    background:#00a1e4;
    color: white;

}

这是因为ul标签不能以margin属性为中心，但div可以。所以，我在ul之外包裹了一个div，并给了div宽度为960px和margin属性......

将中心菜单栏与特定宽度对齐

3 个答案: