css - 使用 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;
}

也许您需要稍微重新定位标签或复选框本身，以使它们处于漂亮的基线上。