Horizontally space out my checkboxes using css? [closed]

Question

I have a list of checkboxes that I'd like to have spaced out on a single horizontal line.

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

They display on the line, but I'd like to space them out more.

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

I'd rather not create a div around each input, is there an easier way?

Answer 1

Increase the left and right margin

margin: 10px 20px;

Answer 2

You can define the CSS class on the containing element's class AND the input tag, like this:

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

That'll save you having to add a class to each input element. To space them out more, increase the margin.

Answer 3

Wel you do not even have labels yet. Have you tried that? A label and some spaces would work wonders.