1

这是我的挣扎。所以我一直想知道如何让导航栏链接填充 100% 的导航。因此，如果添加更多链接，它们的间距和字体大小会减小 - 这样它总是会填充 100%。

就像现在一样，我似乎无法做到这一点。我只有一个固定的填充，但我尝试过做类似的事情：

display: block;
float: left;
width: 100%;

但它给了我各种根本不起作用的效果：S

有人能帮我解决这个问题吗？

代码笔示例

4

3 回答 3

1

这样做的一种方法是display: table在父母和display:table-cell孩子身上使用。我相信它不适用于某些版本的 IE（当然）。这是一个例子

于 2013-03-11T13:10:38.747 回答
1

从#main-navigation 中删除宽度并将with 添加到#main-navigation li，其值等于100/the_numberof_elements_in_the 列表。你的CSS应该是：

#main-navigation {
    height: 54px;
    overflow: hidden;
    border-bottom: 1px solid black;
}

#main-navigation ul {
    height: 54px;
    overflow: hidden;
}

#main-navigation li {
    font-size: 1.0em;
    text-transform: uppercase;
    list-style: none;
    float: left;
    width: 20%;
}

这样，您的导航将占据所有可用宽度，但您的字体大小不会自动调整大小。您还应该根据元素的数量来更改它（类似于您对 li 宽度所做的方式）。如果您在服务器端动态生成此列表，您可以对 css 执行相同操作，然后计算这两个属性的正确值。如果您使用 ajax 填充列表，则可以使用 javascript 更改属性。

于 2013-03-11T13:19:48.457 回答
1

您可以改用nav标签并将其视为表格。将<ul>标签视为表格行，将<li>标签视为表格单元格。前任：

nav{
 display: table;
 text-align: center;
 width: 100%

}
nav ul{
 display: table-row;
}

nav ul li {
 display: table-cell;
}

这将拉伸<li>100%的内容

我是从以下链接中了解到的：http ://www.darkstardesign.com/darkstar-blog/2012/11/27/stretching-horizo​​ntal-navigation-menus-to-the-full-width-of-a-layout/

于 2014-09-23T04:28:37.927 回答