CSSでのチェックボックスの書式と位置

Question

CSSを使用して配置したいチェックボックスのセットがあります。このそれらがどのようにレンダリングされるかである。

<div id="edit-event-type" class="form-checkboxes"> 
    <div class="form-item form-type-checkbox form-item-event-type-pubQuiz"> 
    <input type="checkbox" id="edit-event-type-pubquiz" name="event_type[pubQuiz]" value="pubQuiz" class="form-checkbox"> 
    <label class="option" for="edit-event-type-pubquiz">Pub Quiz </label> 
</div> 

<div class="form-item form-type-checkbox form-item-event-type-dancing"> 
    <input type="checkbox" id="edit-event-type-dancing" name="event_type[dancing]" value="dancing" class="form-checkbox">  
    <label class="option" for="edit-event-type-dancing">Dancing </label> 
</div> 

<div class="form-item form-type-checkbox form-item-event-type-foodDeals"> 
    <input type="checkbox" id="edit-event-type-fooddeals" name="event_type[foodDeals]" value="foodDeals" class="form-checkbox"> 
    <label class="option" for="edit-event-type-fooddeals">Food Deals </label> 
</div> 

<div class="form-item form-type-checkbox form-item-event-type-liveMusic"> 
    <input type="checkbox" id="edit-event-type-livemusic" name="event_type[liveMusic]" value="liveMusic" class="form-checkbox"> 
    <label class="option" for="edit-event-type-livemusic">Live Music </label> 
</div> 
</div> 

//Other form elements come after. 

瞬間、彼らが表示なっている他の上に積み重ね、私はのstackesに表示されるように、それらをしたいと思い、4。だから私は彼らがなりたいと言いますこのように表示：

http://i.imgur.com/SvIQv.png

しかし、私は理想的に、私はそれがすべてCSSで行うことを希望するマークアップの制御が限られています。私はfloat:leftを試して、それらに右マージンを割り当てましたが、私がそれをするとき、スタックは4つですが、正しく整列していないという問題があります。誰もこのような問題を以前に持っていましたか？

おかげで、

Answer 1

は、すべてのコンテナのdivにこのクラスの「フォーム型 - チェックボックス」（ - そのはそれが欠けても、最初の）を得ました。このすべてにコンテナを追加してください。

CSS：

.container-of-all { 
    overflow: auto; 
    background: #000000; 
} 

.form-type-checkbox { 
    float: left; 
    width: 100px; 
    margin: 5px 10px 5px 10px; 
} 

多分あなたはかなりのベースライン上でそれらを得るために、それ自体ビットラベルやチェックボックスの位置を変更する必要があります。