HTMLの書式設定ボックス内のボタンの整列

Question

私は役に立つだろうと思っていた小さなプロジェクトに取り組んで、html、css、javascriptを書いてきました。それは私が自宅で持っているレシピに基づいてレシピファインダーです。とにかく、私の質問は、HTMLページのいくつかの要素を並べることです。
問題のhtmlページの一部は次のとおりです。

<form> 
<select size=10 id="first"></select> 
<button type="button" id="addAll" onclick="rightAll()"> 
    Add All 
</button> 
<button type="button" id="removeAll" onclick="leftAll()"> 
    Remove All 
</button> 
<button type="button" id="add" onclick="right()"> 
    >> 
</button> 
<button type="button" id="remove" onclick="left()"> 
    &lt;&lt; 
</button> 
<select size=10 id="second"></select> 
</form> 

私のCSSドキュメント：すべての要素がformタグであるため

html, body { 
    height: 100%; 
    min-height: 100%; 
} 
select{ 
    width: 300px; 
} 

が、それらはすべてインラインで表示されます。私は、テーブルにボタンを入れてみましたが、テーブルの書式設定は、最初の選択を1行に、新しい行にはテーブルを、2行目には新しい行を選択します。
ここ は私の書式が今のように見えるものです：
とここで私はそれが見えるようにしたいものです（おかげでペイントする）
私は形で垂直ボタンを中央する方法を見つけ出すことができ確信しています、それでも私を助けることができたら、本当に感謝します！

Answer 1

HTML

<form> 
    <div id="sel1"> 
     <select size=10 id="first"></select> 
    </div> 
    <div id="buttons"> 
     <div id="buttons1"> 
      <button type="button" id="addAll" onclick="rightAll()"> 
      Add All 
      </button> 
      <button type="button" id="removeAll" onclick="leftAll()"> 
      Remove All 
      </button> 
     </div> 
     <div id="buttons2"> 
      <button type="button" id="add" onclick="right()"> 
      >> 
      </button> 
      <button type="button" id="remove" onclick="left()"> 
      &lt;&lt; 
      </button> 
     </div> 
    </div> 
    <div id="sel2"> 
     <select size=10 id="second"></select> 
    </div> 
</form> 

CSS

html, body { 
    height: 100%; 
    min-height: 100%; 
} 
select{ 
    width: 300px; 
} 
div { 
    float: left; 
} 
#buttons1, #buttons2 { 
    float: none; 
    text-align: center; 
} 

それはあなたの欲求のままにしてパディングとマージンを微調整するのはあなた次第です。

Answer 2

デザインをさらに拡張したい、テーブルが直接反応しない、乱雑なコードで固定レイアウトのタイプを使用する場合はdivを使用する必要があります。divなどのCSSプロパティを使用してみてください。

はとにかくちょうどその真ん中のセクションのために、あなたは、このようなあなたのテーブルTDの内側のdivを試みることがあります。

<div style="width:100%;"> 
<div style="width:50%;float:left;"> 
<button type="button" id="addAll" onclick="rightAll()"> 
    Add All 
</button> 
<div> 
<div style="width:50%;float:right;"> 
<button type="button" id="removeAll" onclick="leftAll()"> 
    Remove All 
</button> 
<div> 
<div style="clear:both;"></div> 
</div> 

<div style="width:100%;"> 
<div style="width:50%;float:left;"> 
<button type="button" id="add" onclick="right()"> 
    >> 
</button> 
<div> 
<div style="width:50%;float:right;"> 
<button type="button" id="remove" onclick="left()"> 
    &lt;&lt; 
</button> 
<div> 
<div style="clear:both;"></div> 
</div> 

乾杯を！