css - 如何在导航菜单上使背景宽度均匀

我目前有一个NAV菜单，其中的三个链接没有覆盖整个菜单栏（这是我想要的）。我遇到的问题是使每个链接具有相同的宽度，而不是基于文本中的文本量按钮。

这是我的代码：

HTML：

<header>
     <h1>Matt's Meat</h1>

    <div class="navTop"></div>
    <nav>
        <li><a href="#">Product</a>
        </li>
        <li><a href="#">Flavors</a>
        </li>
        <li><a href="#">Cart</a>
        </li>
        <nav>
            <div class="breadcrumbs"></div>
</header>

CSS：

header {
    width: 850px;
    margin: 0 auto;
    background-color: #fff;
}
h1 {
    font-family:'Quicksand', Palatino, sans-serif;
    font-size: 2.5em;
    padding: 10px 20px;
    color: black;
    background-color: #fff;
    margin: 0;
}
.navTop {
    width: 850px;
    height: 4px;
    border: none;
    background-color: #34AADC;
}
nav {
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    background-color: #333333;
}
.breadcrumbs {
    width: 850px;
    height: 20px;
    border: none;
    background-color: #D7D7D7;
}
nav li a {
    font-family:'Quicksand', Palatino, sans-serif;
    font-size: 1em;
    float: left;
    display: inline;
    padding: 17px 25px 17px 25px;
    text-decoration: none;
    color: #fff;
    border-right: 0px solid #ccc;
}
nav li a:hover {
    color: #fff;
    background-color: #4A4A4A;
}

最佳答案

最简单的方法是给li一个宽度。

例如：

nav li{
    width:30%;
}

然后使链接填充li，从而使它们具有相同的大小，然后添加：

nav li a {
    width:100%;
    text-align:center;
}

还可以用<ul>标记包装li标记。见小提琴。
http://jsfiddle.net/Z4vdA/2/