【发布时间】：2014-09-23 12:28:37
【问题描述】：
这是我的挣扎。所以我一直想知道如何让导航栏链接填充 100% 的导航。这样它们就有相同的间距，并且如果添加更多链接，字体大小会减小 - 这样它总是会填充 100%。
就目前而言，我似乎无法做到这一点。我只有一组填充，但我尝试过做类似的事情：
display: block;
float: left;
width: 100%;
但它给了我各种根本不起作用的效果：S
谁能帮我解决这个问题？
【问题讨论】：
【发布时间】：2014-09-23 12:28:37
【问题描述】：
从#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 更改属性。
【讨论】：
-
感谢您的回答。这似乎是一个好方法，唯一的问题是我不知道导航中有多少菜单项，因为当我提交 wordpress 安装时，这取决于客户。有没有其他方法可以使这项工作？另外，我认为我确实必须指定一个宽度，因为我的侧边栏挡住了。与侧边栏和内容相比，这是整个它的代码笔：codepen.io/anon/pen/eDufF
-
我认为您无法使用纯 css 方法来做到这一点。如果愿意使用 CSS3r，也许可以通过计算达到这个结果，但是它们的浏览器支持很差。
-
这是一个使用 JQuery 的解决方案。您可以将元素添加到列表中，所有内容都会相应地调整大小。 codepen.io/anon/pen/KvnpA
-
谢谢扫罗。这真的很有帮助，尤其是因为我根本不熟悉 JQuery。它只是我的浏览器，还是列表项为每个项目填充一半？好像间距越来越小？
-
实际上，你给我的这个 Jquery 脚本在与 display: table 结合使用时效果很好，并且 display:table-cell 在孩子上，如@mno4k 回答。感谢你们俩，我终于想通了:)
一种方法是在父级上使用display: table，在子级上使用display:table-cell。我相信它不适用于某些版本的 IE（当然）。 Here's 一个例子
【讨论】：
-
这工作得很好，按照我的要求做了。感谢您花时间告诉我 :) 如果我添加的列表项超出了设置的宽度可以处理的数量，则会出现此解决方案的唯一问题。我确实相信这是因为我为文本设置了字体大小和填充。所以我想我必须使用 Javascript 来设置一些条件，就像 Saul 向我展示的那样，但是该解决方案也存在一些问题，呵呵..
您可以改用nav 标签并将其视为表格。将<ul> 标记视为表格行，将<li> 标记视为表格单元格。例如：
nav{
display: table;
text-align: center;
width: 100%
}
nav ul{
display: table-row;
}
nav ul li {
display: table-cell;
}
这会将<li>的内容拉伸100%
【讨论】：