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;
}

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

CSS复选框的格式和位置

1 个答案: