Question

我有一个复选框列表，我想在一条水平线上间隔开。

<div class="timesheet-daily-entry-fields-container">
        <input id="TimesheetMondayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
        <input id="TimesheetTuesdayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
        <input id="TimesheetWednesdayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
        <input id="TimesheetThursdayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
        <input id="TimesheetFridayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
        <input id="TimesheetSaturdayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
        <input id="TimesheetSundayCheckbox" class="timesheet-daily-checkbox" type="checkbox"/>
 </div>

它们显示在线上，但我想将它们分开。

.timesheet-daily-checkbox {
    margin: 10px;
    padding: 10px;
    display:inline-block;
    overflow:hidden
}

我宁愿不在每个输入周围创建一个div，有更简单的方法吗？

Answer 1

增加左右边距

margin: 10px 20px;

Answer 2

您可以在包含元素的类和输入标记上定义CSS类，如下所示：

.timesheet-daily-entry-fields-container input {
    margin: 10px;
    padding: 10px;
    display:inline-block;
    overflow:hidden
}

这将节省您必须为每个输入元素添加一个类。为了使它们更加分散，增加余量。

Answer 3

即使你还没有标签。你试过吗？标签和一些空间可以创造奇迹。

使用css水平分隔我的复选框？

3 个答案: