javascript - 如何将最长元素的宽度分配给其他元素

Question

我有以下元素

练习名称是动态的，因此包含练习名称的按钮的宽度会有所不同，但伴随的颜色按钮的宽度是固定的。父元素有 width: auto; height: auto 无论练习名称有多长，它都适合有多少个按钮。

如何使所有按钮的长度等于最宽的练习名称按钮的宽度？

或者类似地，即使选择了更长的练习名称，我怎样才能让这些按钮对齐而不溢出。？

Answer 1

如果您只在 CSS 中寻找解决方案，有一种方法是使用 display 属性作为 table、table-row 和 表格单元格。我想你可以为你的标记扩展它:

.btn-container {
  display: table;
  border: 1px #000 solid !important;
}
.btn {
  display: table-row;
}
.btn-text {
  display: table-cell;
  padding: 3px;
}
.btn-label {
  width: 30px;
  display: table-cell;
}
.btn-label-red {
    background: #F00;
}
.btn-label-green {
    background: #0F0;
}
.btn-label-blue {
    background: #00F;
}

<div class="btn-container">

  <div class="btn">
    <span class="btn-text">Button 1</span>
    <span class="btn-label btn-label-green"> </span>
  </div>
  <div class="btn">
    <span class="btn-text">Button 2 with large text</span>
    <span class="btn-label btn-label-red"> </span>
  </div>
  <div class="btn">
    <span class="btn-text">Btn 3</span>
    <span class="btn-label btn-label-blue"> </span>
  </div>
</div>