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设为宽度= 14.2（100/7），但我得到的结果如下所示由于所有按钮的宽度不相等而无效。基本上按期望显示为哪里＆＃39; d＆＃39;是元素之间的任何等距离。在这种情况下，我有按钮，如果我有display:block或inline或inline-block个元素，水平相等的空间和垂直相等的空格，我该怎么办？请为响应式网页提供答案。

Answer 1

如果你不想使用弹性框，你可以使用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>

Answer 2

如果你可以使用＆＃34; flexbox＆＃34;然后：

<div class="buttons-flex">
        <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>

         .buttons-flex {
             display: -webkit-flex;
             display: flex;
             -webkit-justify-content: space-between;
             justify-content: space-between;
         }

如果你需要支持旧的浏览器（如IE9）并且不能使用＆＃34; flexbox＆＃34;，那么就没有100％的解决方案，在这种情况下你能得到的最好的可能是这样的这样：

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

         .buttons-table {
             display: table;
             width: 100%;
             table-layout: fixed;
             text-align: center;
         }
         .buttons-table div {
             display: table-cell;
         }

检查＆＃34; flexbox＆＃34;的供应商前缀和浏览器支持参考http://caniuse.com/#search=flex

Answer 3

使用display：flex和justify-content：space-between

检查此代码段

.buttons {
  display: flex;
  justify-content: space-between;
}

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

Answer 4

只需在父div中使用display flex，然后在按钮中插入边距值。

https://jsfiddle.net/a20eavga/2/

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

.buttons{
  display:flex;
}

button, input {
  margin-left:10px;
}

Answer 5

尝试定义填充和边距。

按钮在它们之间平均间隔（水平）

5 个答案: