div内のボタンとボタン間の間隔を調整する

Question

私は3つのボタンと生成されるスパンを持つdivを持っています。
私の質問は次のとおりです。

マージンを使わずにボタンを四角形に揃えることはできますか？
（最初のボタンは最初の四角が始まるところにあり、最後のボタンは最後の四角が終わるところにあります）

どのように私のスパンを2つのボタンの内側に揃えますか？

<div id="stripe"> 
    <button id="new">New Colors</button> 
    <span id="message"></span> 
    <button id="easy">Easy</button> 
    <button id="hard">Hard</button> 
</div> 

Fiddle

Answer 1

あなたはこれを行うことができます。あなたはの中のの単語をの間に置き換え、の単語の間に置き換える必要があります。あなたのケースのスパンはボタンの内側にありません。

button{ 
 
    background-color:darkblue; 
 
    color:white; 
 
    padding:5px 10px; 
 
    border:none; 
 
    font-size:20px; 
 
} 
 

 
#stripe >*{ 
 
    vertical-align:top;/*or bottom, middle....*/ 
 
}

<div id="stripe"> 
 
    <button id="new">New Colors</button> 
 
    <span id="message">Some message</span> 
 
    <button id="easy">Easy</button> 
 
    <button id="hard">Hard</button> 
 
</div>