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

Question

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

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

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

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

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

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

Answer 1

你可以使用弹性如果它们是兄弟，则 Flex 项目可以共享相同的宽度。https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction.parent {&nbsp; display: flex;}.container {&nbsp; display: flex;&nbsp; flex-direction: column;}<div class='parent'>&nbsp; <div class="container">&nbsp; &nbsp; <button>label label label label</button>&nbsp; &nbsp; <button>button</button>&nbsp; &nbsp; <button>button</button>&nbsp; &nbsp; <button>button</button>&nbsp; &nbsp; <button>button button</button>&nbsp; </div></div>

Answer 2

您可以使用 display:table 选项：https://jsfiddle.net/falkedesign/bjxL1atd/.table {&nbsp; display: table;}.torw {&nbsp; display: table-row;}.tcell {&nbsp; display: table-cell;}div {&nbsp; border: 1px solid #000;}button {&nbsp; width: 100%;}<div class="table">&nbsp; <div class="trow"><button>BTN</button></div>&nbsp; <div class="trow"><span class="tcell">txt</span></div>&nbsp; <div class="trow"><span class="tcell">txt sdf sdf</span></div>&nbsp; <div class="trow"><span class="tcell">txt sdfsdfsdfsdfsd</span></div></div>