在没有 flexbox 或 text-align justify 的情况下在两端水平对齐内容/导航

Question

我正在尝试做以下要点：

我有一个固定（硬编码）宽度 f.x 的容器。 1300px，里面有 6 个项目。 这些项目是具有 16 像素字体大小的锚标记，没有为它们添加宽度，因为当网站上的语言发生变化时它们会发生变化。

手头的任务： 这 6 个项目需要在两端对齐（徽标 - 左，汉堡菜单/搜索栏 - 右）这是 html 的示例：

     <div class="wrapper">
                <div class="navContainer">
                    <a class="navLink" href="">This LongName</a>
                    <a class="navLink" href="">This LongerName</a>
                    <a class="navLink" href="">This evenLongerName</a>
                    <a class="navLink" href="">This short</a>
                    <a class="navLink" href="">ThatShort</a>
                    <a class="navLink" href="">OneWordName</a>
                </div>
            </div>

and the CSS 
`       .wrapper{
            background-color:#CCC;
            color:black;
            height:80px;
        }
        .navContainer{
            width:1300px;
            margin:0 auto;
        }
        .navLink{
            display: inline-block;
            text-decoration: none;
            color: #676767;
            font-size: 16px;
            line-height: 22px;
            padding-top: 20px;
            margin: 0;
        }
`

问题来自于我不能使用 text-align justify 与伪元素，没有弹性框，没有任何东西可以找出这些没有固定宽度的元素之间的空间，因为它会根据内容填入标签。

是否可以在不使用 flexbox/text-align justify 或显示表格、表格单元格的情况下使用相同的空间使其左右对齐？我不能使用这些的原因应该是 IE8 支持的。

提前感谢您的宝贵时间

P.S 我也尝试使用 Jquery 动态获取宽度，但仍然无法正常工作，因为我无法排除最后一项不在等式中。但是，当它起作用时，尽管它永远不会为最后一个孩子添加足够的 padding-right 来坚持到右边。

Answer 1

您提到不使用宽度，但如果短语太长，文本将自动换行到下一行，所以我建议这样做。在.navLink 元素上将display: inline-block; 替换为display: block;，并结合float 添加设置宽度，因为IE8 支持。

您不能使用calc(100%/6)，因为它在 IE8 中不受支持，但您可以添加该计算的值 (16.667%)。请参阅包含的代码 sn-p。我还调整了.navLink 上的填充，因此它将控制.wrapper 的高度，而不是在该元素上设置高度。这是因为长导航术语/短语可能会换行。

.wrapper{
    float: left;
    width: 100;
    background-color:#CCC;
}
.navContainer{
    width: 1300px;
    margin: 0 auto;
}
.navLink{
    display: block;
    float: left;
    width: 16.6667%;
    text-decoration: none;
    color: #676767;
    font-size: 16px;
    line-height: 22px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;
}

<div class="wrapper">
    <div class="navContainer">
        <a class="navLink" href="">This LongName</a>
        <a class="navLink" href="">This LongerName</a>
        <a class="navLink" href="">This evenLongerName that will wrap to lower lines with more text when necessary like in a German phrase for example</a>
        <a class="navLink" href="">This short</a>
        <a class="navLink" href="">ThatShort</a>
        <a class="navLink" href="">OneWordName</a>
    </div>
</div>