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

Question

我目前有一个 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;
}

Answer 1

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

例如:

nav li{
    width:30%;
}

然后使链接填充 li，因此使它们具有相同的大小 添加:

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

同时用 <ul> 包裹 li 标签标签。见 fiddle 。 http://jsfiddle.net/Z4vdA/2/