删除由换行引起的空白答案

【问题标题】：Remove white-space caused by wrap删除由换行引起的空白
【发布时间】：2021-06-01 05:57:03
【问题描述】：

我有一个包含多个具有相同固定宽度的按钮的字段集。在一行/一行中，它应该适合尽可能多的按钮。然而，在换行期间，它会导致一个很大的空白。

我尝试将display: flex; 与flex-wrap 结合使用。但是空白仍然存在或框溢出

我还尝试了使用 grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 的 css-grid，但这也不起作用。

还有其他人知道如何根据内容调整框的大小以不留下空白或调整按钮的大小以填充所有空间而不破坏框的最大宽度并尽可能多地适应吗？

我知道为什么那里的空白，但我不知道如何删除它。我知道它可能需要Javascript。然而，关于 SO 的相关问题也提到了这一点，但无法将 Javascript 解决方案阐述为可理解/可重现。

div {
  max-width: 80%;
}

button{
  width: 10em;
}

<div>
  <fieldset>
    <legend>Color</legend>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
  </fieldset>
</div>

【问题讨论】：

你在使用flex模型的时候，有没有尝试添加flex-grow？ fieldset > * { flex-grow: 1 }
@AmauryHanser 不，我没有，因为如果一行内的数量不同，它会将按钮的大小调整为不同的宽度。它们都需要相同的宽度。
@PauliD 没有那些“相关问题”不会回答我的问题。他们提到它可以通过使用 Javascript 来完成。但是对于如何使用 Javascript 来缩小盒子，并没有足够的解释。
即使是 JS 也无法做到这一点，或者我们可以编写一个非常 hacky 的代码
按钮的宽度是固定的吗？如果是，我们可以找到解决方案，如果不是，那就很难了

标签： javascript html css removing-whitespace

【解决方案1】：

如果这里的尺寸是固定的，这是一个使用 CSS 网格的想法。诀窍是我们使用重复的按钮宽度定义一个网格，并让字段集占据所有列。这将使其宽度等于N*width of button，其中N 是动态的并且取决于屏幕尺寸

div.box {
  display:grid;
  font-size:14px;
  /*0.75em is the default padding of fieldset */
  grid-template-columns:0.75em repeat(auto-fit,10em) calc(0.75em + 4px);
  grid-gap:4px;
}
fieldset {
  grid-column:1/-1;
}

button{
  width: 10em;
  font-size:14px; /* define the font-size to avoid the default one*/
  margin-right:4px; /* same as gap */
}

<div class="box">
  <fieldset>
    <legend>Color</legend>
    <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button><button>9</button>
  </fieldset>
</div>

【讨论】：