css - 居中具有不同列表项宽度的流体导航

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>​

希望这可以帮助。看看小提琴！:)

Answer 2

try

.nav ul{text-align:center;}

if that doesn't work, try

.nav ul {width:100%; overflow:hidden;} .nav ul li{position:relative;margin:0px auto;}