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

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

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

---

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

好的，您甚至还没有标签。你试过了吗？一个标签和一些空格会创造奇迹。

增加左右边距

margin: 10px 20px;

---

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

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

---

这将节省您向每个输入元素添加类的时间。若要将它们留出更多空间，请增加边距。

在您的

时间表每日复选框中增加右边边距不是吗？不，不幸的是，不是。嗯，我不知道。这就是我来这里的原因。在这里工作很好。你有其他可能会干扰的代码吗？这取决于CSS，当然可以。我希望在不需要为空白标签编写额外代码的情况下实现这一点，但如果这是最好的方法，我会这么做。我并不是暗示你使用空白标签。我只是假设最终你需要给他们一些。但是，你不应该添加空格（非中断或正常）来创建水平空格，就像你不应该使用

标记来创建垂直空格一样。这就是边距和填充的用途。我删除了除此之外的所有其他样式，但都不起作用。为什么要删除其他样式？这是你需要改变的。起初我没有。这不是双向的，但似乎是一个单独的问题。检查我评论中的小提琴，它工作得很好。您的代码中一定有其他内容影响了它。我将接受您的答案，因为它是正确的。最后，我不得不应用内联样式来覆盖任何其他影响它的代码。
.timesheet-daily-entry-fields-container input {
    margin: 10px;
    padding: 10px;
    display:inline-block;
    overflow:hidden
}