html - 块中的 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 fiddle。

Answer 1

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

然后将内容拉伸到 100% 宽度

小提琴

标记

<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() 函数来实现这种效果。

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