块中的CSS自动边距以适合它的宽度

Question

我有这个HTML代码:

<div class="link-area">
     <a href="/" id="parts">????????????</a>
     <a href="/catalogs/oil_mp" id="oils">?????/????????????</a>
     <div class="oil-dd"></div>
     <a href="/catalogs/accums_mp" id="accums">????????????</a>
     <a href="/catalogs/wheel_fixture_mp" id="wheel_fixtures">??????</a>
     <div class="wheel_fixture-dd">     
     </div>
     <a href="/catalogs/wheel_fixture_mp" id="parts_for_service">???????? ??? ??</a>
 </div>

它看起来像这样:

但我必须改变它,在link-areadiv中的块之间,边距设置为auto,以便所有这些块都位于以下所有宽度link-area:

我怎样才能做到这一点？请看我的JS小提琴.

Answer 1

使用text-align: justify;容器元素上.

然后拉伸内容以占据100%的宽度

小提琴

MARKUP

<div class="link-area">
     <a href="/" id="parts">????????????</a>
     <a href="/catalogs/oil_mp" id="oils">?????/????????????</a>

     <a href="/catalogs/accums_mp" id="accums">????????????</a>
     <a href="/catalogs/wheel_fixture_mp" id="wheel_fixtures">??????</a>

     <a href="/catalogs/wheel_fixture_mp" id="parts_for_service">???????? ??? ??</a>
 </div>

CSS

div {
    text-align: justify;
}

div > a {
    display: inline-block;
    background: pink;
}

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

如需进一步参考,请查看这篇文章(这也是我从中学到这个方法的地方)

以及我在这里使用css calc()函数来实现这种效果的答案.