使用css水平间隔我的复选框？ [关闭]答案

【问题标题】：Horizontally space out my checkboxes using css? [closed]使用css水平间隔我的复选框？ [关闭]
【发布时间】：2012-10-10 12:15:12
【问题描述】：

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

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

【问题讨论】：

不会增加timesheet-daily-checkbox 类的右边距吗？
不，很遗憾它没有。
嗯，我不知道。这就是我在这里的原因。
在这里工作正常jsfiddle.net/j08691/pyRcz。您是否还有其他可能会干扰的代码？
取决于 CSS 确定它可以。

标签： html css checkbox margin padding

【解决方案1】：

增加左右边距

margin: 10px 20px;

【讨论】：

我删除了除此之外的所有其他样式，但它不起作用。
为什么要删除其他的？那是你需要改变的。 jsfiddle.net/2SXUH
起初我没有。它不能双向工作，但似乎是一个单独的问题。
检查我评论中的小提琴，它工作正常。您代码中的其他内容一定会影响它。
我会接受你的回答，因为它是正确的。最后，我不得不应用内联样式来覆盖影响它的任何其他代码。

【解决方案2】：

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

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

这样您就不必为每个输入元素添加一个类。要将它们分开更多，请增加边距。

【讨论】：

【解决方案3】：

你甚至还没有标签。你试过吗？一个标签和一些空格会产生奇迹。

【讨论】：

我希望实现这一点而不需要额外的空白标签代码，但如果这是最好的方法，我会这样做。
我并不是在暗示你使用空白标签。我只是假设最终你需要给他们一些。
仍然，您不应该添加空格（非中断或正常）来创建水平空格，就像您不应该使用 <br> 标签来创建垂直空格一样。这就是边距和内边距的用途。