2

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

这是我的代码：

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;
}
4

2 回答 2

1

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

例如：

nav li{
    width:30%;
}

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

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

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

于 2013-11-05T22:29:00.873 回答
0

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

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

小提琴在这里。在此示例中，您必须更改悬停样式，但如果固定宽度。

于 2013-11-05T22:30:55.150 回答