How to make navbar-links fill out 100% of the width of a page

Here's my struggle. So I've been wondering how I could make the navbar-links fill out 100% of the nav. So that they have an equal amount of spacing and the font-size will decrease if more links were added - this way it will always fill out 100%.

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

As it is now, I cannot seem to achieve this. I've only got a set padding, but I've tried doing stuff like:

就像现在一样,我似乎无法做到这一点。我只有一套填充,但我尝试过这样的事情:

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

but it's giving me all kind of effects that doesn't work at all :S

但它给了我一些根本不起作用的效果:S

Anyone able to help me out on this?

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

Codepen example

3 个解决方案

#1

Remove width from #main-navigation and add with to #main-navigation li with a value equal to the 100/the_numberof_elements_in_the list. Your css should be:

从#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%;
}

This way you'll have your nav occupying all the available width, but your font-size will not automatically resize. You'll should change it also in function of the number of elements (similar the way you have to do to the li's width). If your are generating this list dynamically at server side, you could do the same with the css and then calculate the right values for these two attributes. If your are using ajax to populate the list, you could do change the attributes with javascript.

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

#2

A way of doing this is using display: table on the parent and display:table-cell on the children. I believe it won't work on some versions of IE (of course). Here's an exaple

这样做的一种方法是在父级上使用display:table,在子级上使用display:table-cell。我相信它不适用于某些版本的IE(当然)。这是一个例子

#3

You can use the nav tag instead and treat it as table. Treat the <ul> tag as table-row and <li> tag as table-cell. Ex:

您可以改用nav标签并将其视为表格。将

标记视为表格单元格。例如:

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

}
nav ul{
 display: table-row;
}

nav ul li {
 display: table-cell;
}

This will stretch the contents of <li> 100%

这将拉伸

100%的内容

I learnt it from the following link: http://www.darkstardesign.com/darkstar-blog/2012/11/27/stretching-horizontal-navigation-menus-to-the-full-width-of-a-layout/

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

#1