html - 按钮之间的间距相等(水平)

Question

我的代码是

<div class="buttons">
<input id="date" type="date" name="Date">
<button id="ShowAll">Show All</button>
<button id=" showvalid">Show Valid</button>
<button id=" showpending">Show Pending</button>
<button id=" save">Save</button>
<button id=" clear">Clear</button>
<button id=" downloadascsv">Download As CSV</button>

我希望那些输入日期和按钮在 class="buttons" div 中水平放置。我尝试了谷歌的许多技巧，但都没有奏效，因为这些按钮的宽度不等。我尝试将按钮放在单独的 div 中并将 div 设置为 width=14.2(100/7) 但我得到的结果如下所示 这没有用，因为所有按钮的宽度都不相等。基本上按预期显示为其中“d”是元素之间的任意等距离。在这种情况下，我有按钮，如果我有 display:block 或 inline 或 inline-block 元素水平间距相等，我该怎么办垂直空间相等。请给出响应式网页的答案。

Answer 1

如果你不想使用 flex box，你可以使用 text-align:justify 和一个伪来在单行上触发它。

.buttons {
  text-align:justify;
}
.buttons:after {
  content:'';
  display:inline-block;
  width:99.5%;/* generates an extra transparent line */
}
/* makeup*/
.buttons {
  min-width:45em;
  padding: 1.2em 1em 0;
  box-shadow:0 0 5px;
  margin:1em;
  border-radius:0.25em;
}

open snippet in full page :)
<div class="buttons">
<input id="date" type="date" name="Date">
<button id="ShowAll">Show All</button>
<button id=" showvalid">Show Valid</button>
<button id=" showpending">Show Pending</button>
<button id=" save">Save</button>
<button id=" clear">Clear</button>
<button id=" downloadascsv">Download As CSV</button>
</div>