CSS复选框的格式和位置

我有一组复选框，我想使用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个。因此，我希望它们显示如下：

但是，我对标记的控制有限，所以理想情况下我希望所有的标记都用CSS完成。我尝试了

float:left

并为它们分配了一个右边距，但当我这样做时，尽管它们是4个一组的，但存在一个问题，即它们没有正确对齐。以前有人遇到过这样的问题吗

---

谢谢，

给这个类的所有容器div“formtype checkbox”（也是第一个-它缺少它）。还要为所有这些添加一个容器

css:

---

也许您需要重新定位标签或复选框本身，使其处于一个良好的基线上。

您说的“未正确对齐”是什么意思？你能在jfiddle上发布一个工作示例吗？我的意思是，由于一些标签比其他标签长，所以第二列的缩进不是“直的”。

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

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