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

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

例如：

nav li{
    width:30%;
}

然后使链接填充li，因此使它们大小相同：

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

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

Answer 2

您可以在li上放置一个宽度，但如果文本太长，它将换行到第二行。

nav li {
    display:inline-block;
    width:20%;
}

小提琴是here。在此示例中，您必须更改悬停样式，但是如果修复了宽度。

如何在导航菜单上制作均匀的背景宽度

2 个答案: