无法将div放在div中

Question

我试图将我的导航链接集中在里面,div但无论我尝试过什么都行不通.我试过margin-left:auto,margin-right:auto但没有...

这是CSS代码的一部分:

#nav {
    display:block;
    background-color:#505050;
    height:17.5px;
    box-shadow: 0px 0px 15px 5px #CCCCCC inset;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:1.5%;
}
#nav li {
    padding:0px 20px 0px 20px;
    display:inline;
    /*float:left;*/
    list-style:none;
    position:relative;
}
#nav li a {
    padding:0px 0px 20px 0px;
    color:#FFFFFF;
    text-decoration:none;
}

这是我的ul代码:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Current Litters</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="./bandi.html">Bandi</a></li>
            <li><a href="./studs.html">Studs Used</a></li>
            <li>Test Dog2</li>
            <li>Test Dog3</li>
        </ul>
    </li>
    <li><a href="#form">Contact Us</a></li>
 </ul>

这是我的其余代码实际上没有它我注意到我的下拉菜单(图库)下没有正确显示,...这是该css文件的其余部分...显示下拉菜单会发生什么. ..你可以告诉我为什么浮子把它拧起来......

......并且文本对齐确实很好......但只有在移除浮动之后......

#nav li a:hover {
    text-decoration:underline;
}
#nav li ul{
    padding:10px;
    font-size:medium;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
    display:block;
    border-radius:20px;
    border:1px solid;
    width:150px;
}

Answer 1

这实际上非常简单,因为您的列表项是display:inline.添加此样式:

#nav {
    text-align:center;
}

演示:http://jsfiddle.net/fH6f5/

还有很多其他方法可以做到这一点,但这似乎就是你所需要的.只要确保不float将<li>S(我看你把它注释掉).