如何使navbar链接填充100％的页面宽度

这是我的奋斗。所以我一直想知道如何让navbar-links填充100％的导航。因此，他们有相等数量的间距，并且如果添加更多链接，字体大小将减少 - 这样它将始终填充100％。如何使navbar链接填充100％的页面宽度

现在，我似乎无法做到这一点。我只带了一套填充，但我试着做这样的东西：

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

，但它给我都挺不工作在所有影响：S

任何人都能够帮助我在这呢？

Codepen example

来源

2013-03-11 michaelw90

从＃main-navigation中删除宽度，并添加到＃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%; 
}

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

来源

2013-03-11 13:19:48

谢谢你的答案。这似乎是一个很好的方法，唯一的问题是，我不知道导航中会有多少菜单项，因为在交付wordpress安装时，这取决于客户端。有没有其他的方式来完成这项工作？另外，我认为我必须指定一个宽度，以查看我的侧边栏是否处于遮挡状态。与边栏和内容相比，下面是整个代码的代码片段：http://codepen.io/anon/pen/eDufF – michaelw90 2013-03-11 13:29:14

我不认为你可以用纯粹的css方法做到这一点。如果愿意使用CSS3r，也许可以通过计算来实现此结果，但它们对浏览器的支持很差。 – 2013-03-11 13:54:42

这是一个使用JQuery的解决方案。您可以将元素添加到列表中，并且所有内容都将相应地调整大小。 http://codepen.io/anon/pen/KvnpA – 2013-03-11 14:20:23

这样做是用在孩子display: table父和display:table-cell的一种方式。我相信它不适用于某些版本的IE（当然）。 Here's an exaple

来源

2013-03-11 13:10:38 jlasarte

这工作得很好，做什么我问。感谢您抽出宝贵的时间告诉我:)如果添加比设置宽度可处理更多的列表项，则会出现此解决方案的唯一问题。我相信这是因为我为文本设置了字体大小和填充。所以我想我必须使用Javascript来设置一些条件，如扫罗给我看，但也有一些问题，该解决方案以及，嘿.. – michaelw90 2013-03-11 20:13:32

您可以改用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/

来源

2014-09-23 04:28:37 Bharath

如何使navbar链接填充100％的页面宽度

回答

相关问题