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

Question

我意识到这个问题已经被问到here，最高的回答非常有帮助，但是我遇到了问题。

基本上我想要一个nav（必不可少的ul及其li s）来平均填充宽度（或宽度的80％）。

第一项任务是使nav居中，第二项任务是确保项目占用相等的空间。关于SO的另一个解决方案提出了一些黑客攻击，在content: ""之后插入ul。当所有li都是一个单词时，这与我在下面显示的其他css规则一起工作得很好。但是，对于两个单词li，我在屏幕截图中获得了效果：

如果没有一种平滑的方法来移除那个空间，那么至少有某种黑客可以让那个空间更小，有人可以想到吗？ 我做了一个jsFiddle here，但它并没有真正说明这个问题有多糟糕。

非常感谢

HTML：

    <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>

CSS：

.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;
}

Answer 1

查看您的代码，似乎解决方案相当简单： 删除"text-align: justify;"可能会解决您的问题。

更长的答案将描述width: 100%将如何传播LI并且文本将完全证明填充它所分配的空间......但我太懒了写下来。

Answer 2

您可以简化CSS并使用display: inline-block - 它非常有用，并为<li>提供百分比宽度值。检查一下（如果你知道你将有的列表项数量）

CSS

.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}

HTML

<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>