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

Question

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

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

设置固定宽度是行不通的，因为不同的页面会有不同的选项文字。

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

目前，我的应用程序显示如插图 1，但我需要像图 2 中那样显示它。

任何 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>