Question

这是我的斗争。所以我一直想知道如何让导航栏链接填充100％的导航。因此，如果添加更多链接，它们具有相等的间距，字体大小将减少 - 这样它将始终填写100％。

就像现在一样，我似乎无法做到这一点。我只有一套填充，但我尝试过像：

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

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

任何人都可以帮我解决这个问题吗？

Codepen example

Answer 1

执行此操作的方法是在父级上使用display: table，在子级上使用display:table-cell。我相信它不适用于某些版本的IE（当然）。 Here's一个问题

Answer 2

从＃main-navigation中删除宽度，并使用等于100 / the_numberof_elements_in_the列表的值添加到＃main-navigation li。你的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更改属性。

Answer 3

您可以使用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-horizontal-navigation-menus-to-the-full-width-of-a-layout/

如何使导航栏链接填充页面宽度的100％

3 个答案: