ボタンを並べて、100％のスペースを取る方法は？

Question

私は、次のHTMLでのボタンの行を得た：

HTML：

<div class="buttons"> 
    <div><input type="button"/></div> 
    <div><input type="button"/></div> 
    <div><input type="button"/></div> 
    <div><input type="button"/></div> 
</div> 

はCSS：一部の行、ボタンの

.buttons > div 
{ 
    float:left; 
    margin-left:25px; 
} 

を、唯一の3つのボタンが表示されます、いくつかの意志2つのボタンしか表示されません。

にはどうすればいいのボタン（ボタン自体はマージン左のスペースを除いてサイズを変更すべきではない）との間に十分なスペースがあるように見えるボタンは、ボタンの行の全体のスペースを取る作るのですか？ボタン行の幅は600ピクセルです。

Answer 1

あなたの「行」のリストを作成します。

<div class="buttons"> 
    <ul> 
     <li><input type="button"/></li> 
     <li><input type="button"/></li> 
    <li><input type="button"/></li> 
    <li><input type="button"/></li> 
    </ul> 
</div> 

Answer 2

width:100%;を試しましたか？

Answer 3

唯一の方法は、行の種類ごとに特定のクラスを使用し、各インスタンスの正しい余白のサイズを計算することであろう。すなわち、クラスはルールが、最初または最後の項目であなたの余白を削除CSSセレクタbuttons li:first-childまたはbuttons li:last-childを使用するなどbuttons_4 liとbuttons_3 li

にマージンを設定してbuttons_4、buttons_3、などと呼ばれます。