html - ul在nav中的定位

Question

我试图将未排序列表放在导航中，但我希望它位于标题框的中心。

<div class="header-box">        
    <nav>
       <ul>
       </ul>
    </nav> 
</div>

http://jsfiddle.net/9zWm9/7/这是我在代码中使用的 fiddle 。

Answer 1

首先，清除 float 。编辑:我的一个 friend 对内部的 div 有真正的问题，所以让我们改变它。

<div class="header-box">
    <nav>
        <ul>
            <li>AASD</li>
            <li>AASD</li>
            <li>AASD</li>
<li style="visibility:hidden;opacity:0;height:0;width:0;clear:both"></li>
        </ul>
    </nav>
</div>

和样式:

<style>


.header-box {
width: 400px;
height: 49px;
border: 1px solid green;
position: relative;
}
ul {
margin: 0 auto;
padding: 0;
text-align: center;
height: 100%;
margin: 13px auto;
}
nav li {
float: none;
list-style-type: none;
/* padding-left: 19px; */
/* margin-left: 20px; */
/* line-height: 50px; */
display: inline-block;
/* top: 0px; */
margin: 0 auto;
text-align: center;
}

</style>