块中的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-area div中的块之间，边距设置为auto，以便所有这些块都位于link-area的所有宽度上：

我该怎么做？请参阅我的JS fiddle。

Answer 1

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

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

<强> FIDDLE

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

如需进一步参考，请查看this post（这也是我从中学习此方法的地方）

以及使用css calc（）函数实现此效果的答案here。

Answer 2

如果橙色框的数量不可变，只需使用这样的边距：

第一个解决方案：

.box{
    margin:0 15px 0 15px;
}
.box:first-child{
    margin:0 30px 0 0;
}
.box:last-child{
    margin:0 0 0 30px;
}

替换正确的值而不是15px和30px

第二个解决方案：

.box{
    float:none !important;
    margin:0 auto;
}
.box:first-child{
    float:left;
    margin:0;
}
.box:last-child{
    float:right;
    margin:0;
}