Horizontally space out my checkboxes using css? [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 7 years ago.

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?

回答1:

Increase the left and right margin

margin: 10px 20px;

回答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.

回答3:

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

来源：https://stackoverflow.com/questions/12981746/horizontally-space-out-my-checkboxes-using-css