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

小编典典

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

css

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

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

但是我找不到使它动态的方法（取消注释最后一个A标签以查看它如何工作，大声笑）。

我不能更改服务器端源来使固定宽度的HTML gerenate。而且我真的很想仅通过CSS来解决它，即使使用JavaScript，我也可以实现该结果。

如何使所有孩子自动独立于父母的宽度而与孩子的数量无关？

阅读 337

2020-05-16

共1个答案

小编典典

这已经是一个相当老的问题。尽管给出的答案在当时很受欢迎，但如今，“ 灵活框式布局
”以更简单的方式提供了相同的结果，并且在所有现代浏览器中均提供了良好的支持。我强烈推荐！

/* 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>

2020-05-16