去除由换行引起的白色-space

Question

我有一个字段集，其中包含多个具有相同固定宽度的按钮。在 row/line 中，它应该容纳尽可能多的按钮。然而在换行期间它会导致一个大的白色-space.

我尝试将 display: flex; 与 flex-wrap 结合使用。然而白色-space仍然存在或盒子溢出

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

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

我知道为什么白色 space 在那里，但我不知道如何删除它。我知道它可能需要 Javascript。然而，关于 SO 的相关问题也提到了这一点，但无法详细说明 Javascript 解决方案 understandable/reproduciable.

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>

Answer 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>

去除由换行引起的白色-space

Remove white-space caused by wrap

html

javascript

css

removing-whitespace