根据按钮列表中最长的文本设置按钮大小

Question

在我的javascript应用程序中，我具有从api获取的可点击选项的列表。

我想根据按钮列表中的最长文字来调整按钮大小。

设置固定宽度将不起作用，因为在不同页面中会有不同的选项文本。

下面，我说明了如何显示按钮。

当前，我的应用显示为第一个插图，但我需要像第二个一样显示它。

任何CSS技巧都能做到这一点吗？

Answer 1

您可以使用flex

Flex项（如果是同级项）可以共享相同的宽度。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

.parent {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
}

<div class='parent'>
  <div class="container">
    <button>label label label label</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button button</button>
  </div>
</div>

Answer 2

您可以使用display：table选项：

https://jsfiddle.net/falkedesign/bjxL1atd/

.table {
  display: table;
}

.torw {
  display: table-row;
}

.tcell {
  display: table-cell;
}

div {
  border: 1px solid #000;
}

button {
  width: 100%;
}

<div class="table">
  <div class="trow"><button>BTN</button></div>
  <div class="trow"><span class="tcell">txt</span></div>
  <div class="trow"><span class="tcell">txt sdf sdf</span></div>
  <div class="trow"><span class="tcell">txt sdfsdfsdfsdfsd</span></div>
</div>