Html 如何使ul nav均匀填充整个页面底部（无表格显示）

我意识到这个问题已经被问到了，投票率最高的答案非常有帮助，但是我有一个问题

基本上，我想要一个nav，只需要一个ul和它的lis来填充宽度，或者说80%的宽度相等

第一项任务是使导航中心居中，第二项任务是确保项目占用相等的空间。另一个解决方案提出了一点技巧，在ul之后插入内容。当所有lis都是一个单词时，这与我在下面展示的其他css规则一起非常有效。然而，对于两个单词的lis，我在这里的屏幕截图中获得了效果：

如果没有一个平滑的方法来移除这个空间，那么是否至少有一些黑客可以让这个空间变得更小，以至于有人能想到？ 我做了一个JSFIDLE，但它并没有真正说明问题有多严重

非常感谢

HTML:

---

看看您的代码，解决方案似乎很简单： 删除文本对齐：对齐；可能会给你安排的

---

一个较长的答案将描述宽度是如何分布的：100%将分布李的，然后文本将完全对齐以填充分配的空间。。。但是我懒得写它。

您可以简化CSS并使用display:inline块-它非常有用，并为s提供一个百分比宽度值。如果您知道列表项的数量，请查看此项

CSS

HTML

---

如果没有文字说明，lis不会均匀分布在其容器中。但是。。。这就是为什么你的文本中有空格。你问了这个问题；为了确保每个按钮占用的空间相等，请将li宽度设置为100/7，即li{width:14%}。。。就像@thePav建议的那样

    <article class="main home">
        <img class="heroLogo" src="media/TM-Logo-4.png">
            <nav>
                <div class="menuIcon"></div>
                <ul>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">Two longWords</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
                </ul>
            </nav>
    </article>

.menuIcon {
    display: none;
}

nav, nav:hover {
    width: 80%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: center;
}

nav ul, nav:hover ul, nav ul.clicked, nav ul.none {
    width: 100%;
    display: block;
    text-align: center;
    text-align: justify;
}

nav ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

nav li {
    width: 100%;
    display: inline;
    padding: 0;
    margin: 0;
}

.menuIcon {display: none}
nav {width: 100%; position: fixed; left: 0; bottom: 0; font-size: 1.2em}
nav ul {text-align: center; padding: 0; width: 80%; margin: 0 auto}
nav li {display: inline-block; width: 14%; margin: 0}

<article class="main home">
  <img class="heroLogo" src="media/TM-Logo-4.png">
  <nav>
    <div class="menuIcon"></div>
    <ul>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">Two longWords</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
    </ul>
  </nav>
</article>