需要一行中的所有元素都是最长兄弟的长度

Question

我有一些动态生成的按钮，按钮文本可能是一个单词，也可能是一个小句子。所以我需要按钮根据内容自动调整大小（即不能使用固定宽度）。

但我还需要所有按钮的大小相同，基于最大按钮的大小。我知道我可以很容易地在 JavaScript 中做到这一点。我在下面提供了一个示例，以便您可以看到预期的结果。

但我想知道是否有一种方法可以只使用 CSS？

// Quick and dirty just for example purposes
document.addEventListener("DOMContentLoaded", function(event) { 
  var buttons = document.querySelectorAll('.container_two > button'),
      biggest = {w:0, h:0};

  buttons.forEach((btn) => {
    var size = btn.getBoundingClientRect();
    biggest.w = biggest.w < size.width ? size.width : biggest.w;
    biggest.h = biggest.h < size.height ? size.height : biggest.h;
  });
  
  //console.log(biggest);

  buttons.forEach((btn) => {
    btn.style.width = Math.ceil(biggest.w)+'px';
    // btn.style.height = biggest.h+'px'; -- flexbox will do this for us
  });
});

strong { display: block; text-align:center;margin-bottom:1em; font-size: 20px; }
hr { margin: 1.5em 0 1em; }
button {
  background: black;
  color: white;
  font-size: 16px;
  padding: 0.5em 1em;
  outline: none;
  border-width: 0;
  border-radius: 0.5em;
}

.container {
  display: flex;
  justify-content: center;
  gap: 1em;
}

<strong>Original</strong>
<div class="container container_one">
  <button>?</button>
  <button>Yep sure, why not do it later?</button>
  <button>Somewhere<br />over<br />the<br />rainbow</button>
</div>

<hr />

<strong>Javascript Solution</strong>
<div class="container container_two">
  <button>?</button>
  <button>Yep sure, why not do it later?</button>
  <button>Somewhere<br />over<br />the<br />rainbow</button>
</div>

Answer 1

试试这个：

设置容器的宽度以收缩包裹内容(width: fit-content)
使用网格属性均匀分布容器space，这会将所有按钮设置为最长元素的宽度。（grid-template-columns: repeat(3, 1fr) 或 1fr 1fr 1fr）。

.container {
  display: grid;
  width: fit-content;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
  margin: 0 auto;
}

button {
  background: black;
  color: white;
  font-size: 16px;
  outline: none;
  border-width: 0;
  border-radius: 0.5em;
}

<div class="container">
  <button>?</button>
  <button>Yep sure, why not do it later?</button>
  <button>Somewhere<br />over<br />the<br />rainbow</button>
</div>

已在 Chrome、Firefox 和 Edge 中测试。检查 caniuse.com 中的 fit-content 以获得完整的兼容性数据。

Answer 2

我建议使用 flex-grow，只要将它添加到按钮上，如果比例相同，所有按钮将增长到相同的比例：

strong { 
  display: block; 
  text-align:center;
  margin-bottom:1em; 
  font-size: 20px; 
}

button {
  background: black;
  color: white;
  font-size: 16px;
  flex: 1; /* you can also use flex-grow: 1; */
  padding: 0.5em 1em;
  outline: none;
  border-width: 0;
  border-radius: 0.5em;
}

.container {
  display: flex;
  justify-content: center;
  gap: 1em;
  max-width: 813px;
  margin: 0 auto;
  /* change the width of the container in order to not fill the entire screen and keep to the required size */
}

<strong>Original</strong>
<div class="container container_one">
  <button>?</button>
  <button>Yep sure, why not do it later?</button>
  <button>Somewhere<br />over<br />the<br />rainbow</button>
</div>

需要一行中的所有元素都是最长兄弟的长度

Need all elements in a row to be the length of the longest sibling

css

flexbox

css-grid