css导航固定页面宽度

Question

我有一个导航列表

<div id='nav'>
        <ul>
            <li><a href='index.php' id="home">Home</a></li>
            <li><a href='products.php' id="products">Products</a></li>
            <li><a href='sign up.php' id="signup">Sign up</a></li>
            <li><a href='cart.php' id="cart">Cart</a></li>
        </ul>
    </div>

我已经用CSS制作了“a”元素的样式，25px高，100px宽，并给出背景色，

#nav li a {
height: 25px;
width: 100px;
display: block;
text-align: center;
background-color:#FFE9BA;
}

但我仍然希望整个导航跨越页面的宽度，我该怎么做？谢谢！

Answer 1

类似于this？

添加了以下CSS

#nav {
text-align: center;
background-color:#FFF9CA;
}


#nav li {
display: inline-block;
}

Answer 2

谢谢，它有点用，如果我在float:left;

中添加#nav li

#nav li { display: inline-block; float:left;} 

然后看起来不会改变任何东西。

在不使用ul的情况下，我更改为使用table并解决问题，对我来说更容易。

无论如何，谢谢你的帮助。