以不同的列表项宽度为中心的流体导航

Question

如何将导航栏中的列表项居中，列表项的宽度是多少？  感谢

<div class="wrapper" style="width:100%">
<div class="nav" style="width:100%">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PROJECTS</a></li>
        <li><a href="#">TOURS</a></li>
        <li><a href="#">VOLUNTEER</a></li>
    </ul>
</div>
</div>

Answer 1

尝试此：

.nav ul {text-align: center;}
.nav ul li {display: inline-block; *display: inline; *zoom: 1; border: 1px solid #999; background: #ccc; padding: 5px;}​​
.nav ul li a {text-decoration: none;}

您已经提供</nav>，实际上是</div>。已更正的 HTML ：

<div class="wrapper" style="width:100%">
    <div class="nav" style="width:100%">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">TOURS</a></li>
            <li><a href="#">VOLUNTEER</a></li>
        </ul>
    </div>
</div>​

希望这会有所帮助。看看fiddle！ ：）

Answer 2

尝试

  

    

.nav ul {text-align：center;}

  

如果不起作用，请尝试

  

    

.nav ul {width：100％;溢出：隐藏;}     .nav ul li {position：relative; margin：0px auto;}