时间戳

首页 > 解决方案 > 如何在具有相等和动态宽度的列中添加按钮

html - 如何在具有相等和动态宽度的列中添加按钮

问题描述

我正在尝试在彼此下方添加按钮。我希望所有这些按钮的宽度与最宽的按钮相同。按钮宽度因按钮文本而异，不应为 100%。

<div>
    <div><button type="button">short</button></div>
    <div><button type="button">medium</button></div>
    <div><button type="button">very long</button></div>
</div>

标签： htmlcss

解决方案

Width:100%将工作提供整体父母缩小到最大的孩子的宽度

.parent {
  width: max-content;
  border: 1px solid red;
}

button {
  width: 100%;
}
<div class="parent">
  <div><button type="button">short</button></div>
  <div><button type="button">medium</button></div>
  <div><button type="button">very long</button></div>
</div>

或使用inline-block（甚至是一inline-flex列）。

.parent {
  display: inline-block;
  border: 1px solid red;
}

button {
  width: 100%;
}
<div class="parent">
  <div><button type="button">short</button></div>
  <div><button type="button">medium</button></div>
  <div><button type="button">very long</button></div>
</div>

推荐阅读