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

Question

在我的 javascript 应用程序中，我有从 api 获得的可点击选项列表。我想根据按钮列表中最长的文本调整按钮大小。设置固定宽度不起作用，因为在不同的页面中会有不同的选项文本。下面我说明了我想如何显示我的按钮。目前，我的应用程序显示如图 1 所示，但我需要像第二个那样显示它。任何 css 技巧都可以做到这一点吗？

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>

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>