2つのボタンを水平に配置する

Question

2つのボタンを間隔をあけて水平に配置する方法を知りたいと思います。

シンプルなHTMLとCSSのコードスニペットを共有できますか？

私は

Answer 1

任意の良い例を見つけることができなかった複数の方法がここにありますが、フロートと非常に簡単な例です：

https://jsfiddle.net/dbb8xk38/

<button class="button-1">Example</button> 
<button class="button-2">Example 2</button> 

button{ 
    float: left; 
} 

.button-2{ 
    margin-left: 15px; 
} 

私は強くw3schoolに行くことをお勧めしますCSSチュートリアルでは、あなたに素晴らしいことを教えてくれます。

http://www.w3schools.com/css/default.asp

注：ボタンを持つ場合は、あなたも、彼らはお互いの隣に来るデフォルトでは、それらをフロートする必要はありません。しかし、divのような要素では、浮動する必要があります。

Answer 2

残りのページでは、レイアウトや他のボタンや他のHTMLコントロールに適用するスタイルによって、何を達成しようとしているかによって異なります。

http://www.w3schools.com/css/css_margin.asp

HTML：

<button>Button 1</button> 
<button>Button 2</button> 

CSS：

button { 
    margin-left:20px; 
} 

HTML/CSS上では、すべてのボタンの左に20ピクセルのマージンを配置します。ボタンに適用するだけであれば、別のクラスやインラインスタイルが必要になります。

など。

CSS：

.buttonSpaced { 
    margin-left:20px; 
} 

そしてちょうどのみ第二ボタンにこのスタイルを適用します。

HTML：

<button class="buttonSpaced">Button 2</button> 

それともそれが再び使用される可能性がない場合は、インラインでそれを行うだけでした...

<button style="margin-left:20px;">Button 2</button>