Формат и положение флажков с помощью 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.

В данный момент они отображаются в стеке друг над другом, и я хотел бы, чтобы они отображались в стопках, скажем, 4. Поэтому я хотел бы, чтобычтобы отображаться так:

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

Однако я ограничил контроль над разметкой, поэтому в идеале я хотел бы, чтобы все это было сделано в CSS.Я попытался float:left и назначил им правильное поле, но когда я это сделал, хотя они в стеках по 4, возникает проблема, когда они не выровнены должным образом.У кого-нибудь была такая проблема?

Спасибо,

Answer 1

дает всем контейнерам div этот класс "form-type-checkbox" (также первый - его не хватает). также добавьте контейнер ко всему этому.

CSS:

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

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

может быть, вам нужно немного переместить метки или флажки, чтобы получить их в достаточно хорошем состоянии.