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

Question

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

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

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

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

目前，我的应用程序显示如图 1 所示，但我需要像第二个那样显示它。

任何 css 技巧都可以做到这一点吗？

标签： javascriptcssangular

Answer 1

你可以使用弹性

如果它们是兄弟，则 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>