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

Question

我正在尝试做以下要点：

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

手头的任务：这 6 个项目需要在两端对齐（徽标 - 左侧，和 burger-menu/searchbar - 右侧）这里是 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，没有任何东西可以找出这些没有固定宽度的元素之间的空间，因为它会根据填充的内容而变化标签。

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

提前感谢您的时间

PS 我也尝试使用 Jquery 动态获取宽度，但仍然无法正常工作，因为我无法排除最后一项不在等式中。 然而，当它起作用时，虽然它永远不会为最后一个孩子添加足够的填充权来坚持正确。

Answer 1

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

您不能使用calc(100%/6)因为它在 IE8 中不受支持，但您可以添加该计算的值 (16.667%)。 请参阅包含的代码片段。 我还调整对填充.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>