如何仅使用 CSS 让子级自动适应父级的宽度？

Question

我有一个服务器端组件，它使用没有固定宽度的 DIV 生成流体布局“工具栏”，并在其中生成许多 A 。

然后我需要自定义该布局以使所有 A 标签自动适应父宽度。但是子级的数量是可变的，并且父级的宽度未知（它会自动适应窗口）。

我用这个小提琴做了一些测试： http://jsfiddle.net/ErickPetru/6nSEj/1/

但我找不到使其动态的方法（取消注释最后一个 A 标记以查看它如何不起作用，哈哈）。

我无法更改服务器端源来生成固定宽度的 HTML。如果有办法的话，我真的只想用 CSS 来解决这个问题，即使用 JavaScript 我也能达到这个结果。

如何使所有子项自动适应父项的宽度，而与子项的数量无关？

Answer 1

您可以使用 display: table-cell:

参见： http://jsfiddle。 net/6nSEj/12/ （或有 5 个孩子）

这不会可以在 IE7 中工作，因为该浏览器根本不支持 display: table 等。

div.parent {
    ..
    width: 100%;
    display: table;
    table-layout: fixed;
}
div.parent a {
    ..
    display: table-cell;
}

Answer 2

这已经是一个很老的问题了。尽管当时给出的答案很受欢迎，但现在 Flexible Box Layout 提供了相同的结果，但更加简单，在所有现代浏览器中都有良好的支持。我强烈推荐它！

/* Important parts */
.parent {
  display: flex;
}

.parent a {
  flex: 1;
}

/* Decoration */
.parent {
  padding: 8px;
  border: 1px solid #ccc;
  background: #ededed;
}

.parent a {
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #dbdbdb;
  color: #111;
}

<div class="parent">
  <a href="#">Some</a>
  <a href="#">Other</a>
  <a href="#">Any</a>
</div>

<br>

<div class="parent">
  <a href="#">Some</a>
  <a href="#">Other</a>
  <a href="#">Any</a>
  <a href="#">One More</a>
  <a href="#">Last</a>
</div>

Answer 3

目前许多人使用 jQuery 来解决这个问题。您所需要的只是一根线。这是你的小提琴。

$("div.parent a").css("width", (($("div.parent").width() / $("div.parent a").length ) -2) + "px");