按鈕同樣它們之間的空間（水平）

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），但我得到的結果如下所示沒有工作，因爲所有按鈕的寬度都不相同。基本上按預期顯示 其中'd'是元素之間的任何等距離。 在這種情況下，我有按鈕，如果我有display:block或inline或inline-block元素在水平方向和垂直方向間隔相等時應該怎麼做。請爲響應式網頁提供答案。

Answer 1

如果你不希望到u您可以使用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

使用display：彎曲和證明內容：

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

空間之間

檢查這個片段只是用顯示器撓性在父DIV和你的按鈕插入保證金值。

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 4

嘗試限定填充和餘量爲好。

Answer 5

如果你可以使用「Flexbox的」，則：如果你需要支持舊的瀏覽器（如IE9），不能使用「Flexbox的」

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

，那麼就沒有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; 
     } 

要檢查供應商前綴和瀏覽器支持的「Flexbox的」是指http://caniuse.com/#search=flex