使用CSS复选框的格式和位置

我有一组复选框，我想使用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.

目前，他们正在越来越显示一个堆叠在另一个上面，我想他们要显示在stackes，说4。所以我想他们是显示如下：

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

在标记不过，我有限的控制，使我非常希望这一切在CSS来实现。我试过float:left并给它们分配了一个右边距，但是当我这样做时，虽然它们是4个堆栈，但存在一个问题，它们没有正确对齐。有没有人有过这样的问题？

感谢，

来源

2011-12-15 KerrM

你的意思是'未正确对齐'是什么意思？你可以在jfiddle上发布一个工作示例吗？ – ptriek 2011-12-15 16:29:29

让所有div容器此类“形式型勾选”（也是第一次 - 它失踪了）。也为这一切添加一个容器。

CSS：

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

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

也许你需要重新定位标签或复选框本身就有点让他们在一个漂亮的底线。

来源

2011-12-15 16:31:39 ggzone

使用CSS复选框的格式和位置

回答

相关问题