ボタンも同様に、それらの間のスペースは、（水平方向）

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のボタンを配置し、幅= 14.2（100/7）としてdivを作成しようとしましたが、次のように結果が得られました。 すべてのボタンの幅が等しくないため動作しませんでした。基本的に期待通りです。 ここで「d」は要素間の等距離です。 この場合、ボタンがあります。 display:blockまたは inlineまたは inline-blockの要素が水平に等しく、垂直に同じになるようにするには、どうすればよいでしょうか。レスポンシブなウェブページに答えてください。

Answer 1

を参照のベンダープレフィックスとブラウザのサポートを確認するには

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

あなたはtext-align：justifyとpseudoを使って1行でトリガすることができます。

.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

使用ディスプレイ：曲がり、正当化 - コンテンツ：チェック

スペースの間にこのスニペット

.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

あなたはその後、「フレキシボックス」を使用することができた場合：

<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のような）古いブラウザをサポートする必要があると「フレキシボックス」を使用することができない場合は、何も100％の溶液を、最高はありませんあなたは、この場合に取得することができ、おそらくこのようなものです：あなたはUにしたくない場合は、「フレキシボックス」http://caniuse.com/#search=flex