javascript - 计数 child + 更改 CSS

Question

我正在尝试根据列表中包含的标签数量动态地为子 A 标签提供均匀的宽度。 (例如，如果 4 个 A 的宽度均为 25%，则 3 个标签的宽度均为 33%)。

我已经尝试计算 div 中的子项数量并将 100 除以 var 编号但没有成功

jQuery

 var numChildren = $("div a").size()
    $('a').css({ width : 100/numChildren });

CSS

a { width: /*DYNAMIC*/ (all even) }

div {width: 100%; }

HTML

<div>
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>

Answer 1

您可以仅使用 CSS，而无需计算元素的数量:

HTML:

<div class="wrapper">
    <a></a>
    <a></a>
    <a></a>
</div>

CSS:

.wrapper {
    display: table;
    width: 100%;
    height: 50px;
    margin: 10px 0;
}
.wrapper > a {
    display: table-cell;
    border: 1px solid #000;
}

Demo