2

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

<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，有没有更简单的方法？

4

3 回答 3

4

增加左右边距

margin: 10px 20px;
于 2012-10-19T20:14:13.303 回答
1

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

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

这将使您不必为每个输入元素添加一个类。要使它们间隔更多，请增加边距。

于 2012-10-19T20:16:31.323 回答
0

好吧，您甚至还没有标签。你试过吗？标签和一些空间会产生奇迹。

于 2012-10-19T20:13:33.837 回答