消除包裹引起的空白 [英] Remove white-space caused by wrap

问题描述

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

I have a fieldset containing multiple buttons with the same fixed width. In a row/line it should fit as many buttons as possible. However during the linebreak it will cause a big white-space.

我尝试将 display:flex; 与 flex-wrap 结合使用.但是空白仍然存在，或者盒子溢出

I tried display: flex; in combination with flex-wrap. However the white-space remains or the box overflows

我也通过使用 grid-template-columns:css-grid来尝试:repeat(auto-fit，minmax(10em，1fr)); 也不起作用.

Also I tried css-grid by using grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); which doesn't work either.

还有其他人想如何将框的大小调整到内容的大小而不留空格，或调整按钮的大小以填满所有空间而又不破坏框的最大宽度并尽可能地适合吗?

Anybody else with an idea how to size either size the box to the content to not leave a white-space or to size the buttons to fill up all the space without breaking the box max-width and fit as many as possible?

我知道为什么会有空白，但是我不知道如何删除它.我知道它可能需要Javascript.但是，有关SO的相关问题也提到了这一点，但是无法说明Javascript解决方案是可以理解/可再现的.

I know why the white space there, but I can't figure out how to remove it. I'm aware that it possibly requires Javascript. However related questions on SO mentioned this aswell but where unable to eleborate a Javascript solution to be 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>

推荐答案

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

If the sizes are fixed here is an idea using CSS grid. The trick is that we define a grid using a repetition of the button width and we make the fieldset take all the columns. This will for it to have a width equal to a N*width of button where N is dynamic and depend on the screen size

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>

这篇关于消除包裹引起的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！