显示：内联用于创建水平导航栏不起作用

Question

我对CSS比较新，而且我的导航栏水平对齐有问题。我试过显示：内联;功能没有成功。当使用float：left函数时，我得到所有li水平对齐，但在这种情况下，我不能将它居中在页面上。保证金：0自动;在这种情况下不会这样做。

导航栏是通过DIV内的ul创建的，DIV也包含在“包装div”中。

问题是否与使用的各种ID选择器以及各种元素的嵌套有关？

请查看下面的jsfiddle进行可视化：

JsFiddle

非常感谢任何帮助：）

谢谢，Danny

HTML

<div id="wrapper">
<div id="navigation">

    <ul>
        <li><a href="#">HOME</a></li>
    </ul>

    <ul>
        <li><a href="gallery.html" class="dropdown">GALLERY</a></li>
        <li class="sublinks"> 
             <a href="#">PORTRAITURE</a>
             <a href="#">NATURE</a>
         </li>
    </ul>

    <ul>
        <li><a href="blog.html">BLOG</a></li>
    </ul>

    <ul>
        <li><a href="about.html">ABOUT</a></li>
    </ul>

    <ul>
        <li><a href="ModelReleaseForm.pdf" target="_blank">MODEL RELEASE</a></li>
    </ul>

    <ul>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>

</div>

</div>

CSS

  ul {
list-style:none;
margin:0px 5px;}

ul li {
display:inline;}

ul li a {
color:#ffffff;
background:#09F;
padding:0px 0px;
margin:0 auto;
font-weight:bold;
font-size:14px;
font-family:'sans open', Arial, Helvetica, sans-serif;
text-decoration:none;
display:block;
width:auto;
height:40px;
line-height:15px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;}

ul li a:hover {
color:#cccccc;
background:#06F;
font-weight:bold;
text-decoration:none;
display:block;
width:auto;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;}

ul li.sublinks a {
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;}

ul li.sublinks a:hover {
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;}

ul li.sublinks {
display:none;}

Answer 1

您的ul需要inline-block并且菜单包装需要text-align:center加上一些width来制作菜单中心，而不管菜单项数量是多少。

我在这里更新了你的小提琴：jsFiddle

Answer 2

您只需制作ul和ul li展示inline-block即可。我还在text-align: center;元素中添加了#navigation。

以下是JsFiddle的工作代码示例：http://jsfiddle.net/hhjfypmt/

Answer 3

您可以按照上述说法执行操作，但如果您还想将其与左/右对齐，则可以将float:right（或left）添加到ul li ：

＆＃13;

＆＃13;

ul {
    list-style:none;
    margin:0px 0px;
}
ul li {
    display:inline-block;
    float:left;
    
}
ul li a {
    color:#ffffff;
    background:#09F;
    padding:0px 0px;
    margin:0 auto;
    font-weight:bold;
    font-size:14px;
    font-family:'sans open', Arial, Helvetica, sans-serif;
    text-decoration:none;
    width:auto;
    height:40px;
    line-height:15px;
    text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border: 1px solid #560E00;
}
ul li a:hover {
    color:#cccccc;
    background:#06F;
    font-weight:bold;
    text-decoration:none;
    width:auto;
    text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border: 1px solid #000000;
}
ul li.sublinks a {
    color:#000000;
    background:#f6f6f6;
    border-bottom:1px solid #cccccc;
    font-weight:normal;
    text-decoration:none;
    width:100px;
    text-align:center;
    margin-top:2px;
}
ul li.sublinks a:hover {
    color:#000000;
    background:#FFEFC6;
    font-weight:normal;
    text-decoration:none;
    width:100px;
    text-align:center;
}
ul li.sublinks {
    display:none;
}
/* CSS For Dropdown Menu End */

＆＃13;

<div id="wrapper">

    <div id="navigation">
        
        <ul>
            <li><a href="#">HOME</a></li>
        </ul>
        
        <ul>
            <li><a href="#" class="dropdown">GALLERY</a></li>
            <li class="sublinks"> 
                 <a href="#">PORTRAITURE</a>
                 <a href="#">NATURE</a>
             </li>
        </ul>
        
        <ul>
            <li><a href="#">BLOG</a></li>
        </ul>
        
        <ul>
            <li><a href="#">ABOUT</a></li>
        </ul>
        
        <ul>
            <li><a href="#" target="_blank">MODEL RELEASE</a></li>
        </ul>
        
        <ul>
            <li><a href="#">CONTACT</a></li>
        </ul>
        
    </div>
    
</div>

＆＃13;

＆＃13;

＆＃13;