时间戳

首页 > 解决方案 > 删除由换行引起的空白

javascript - 删除由换行引起的空白

问题描述

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

我尝试display: flex;与flex-wrap. 但是空白仍然存在或框溢出

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

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

我知道为什么那里的空白，但我不知道如何删除它。我知道它可能需要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>

标签： javascripthtmlcssremoving-whitespace

解决方案

如果这里的尺寸是固定的，这是一个使用 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>

推荐阅读