Html Question posted in
Some basic documentation can be found here.

Html – Can't get <label> and <input> on the same line

I can’t seem to get <label> and <input> on the same line under "Schedule preferences". CodePen here.

I’ve tried floating and table cell attribute manipulation. Any help would be greatly appreciated as something this simple shouldn’t be giving me such a difficult time.

    <label for="schedule-preference">Schedule Preferences:</label><br />
    <input type="checkbox" id="weekday" name="schedule_preference" value="weekday">
    <label for="weekday">Weekday</label>
    <input type="checkbox" id="weekday_evenings" name="schedule_preference" value="weekday_evenings">
    <label for="weekday_evenings">Weekday evenings</label>
    <input type="checkbox" id="weekend" name="schedule_preference" value="weekend">
    <label for="weekend">Weekend</label><br>
Tags:

2

Answers


  1. 0

    It’s because your labels are all styled with either display: table-cell or display: block. For the labels you want to appear beside their inputs, you’ll need to style them as display: inline or display: inline-block.

    Login or Signup to reply.
  2. 0

    If i understand correctly you need to wrap the label around the input:

    <label for="schedule-preference">Schedule Preferences:</label><br />
    <label for="weekday"><input type="checkbox" id="weekday" name="schedule_preference" value="weekday">
    Weekday</label><br>
    <label for="weekday_evenings"><input type="checkbox" id="weekday_evenings" name="schedule_preference" value="weekday_evenings">
    Weekday evenings</label><br>
    <label for="weekend"><input type="checkbox" id="weekend" name="schedule_preference" value="weekend">
    Weekend</label><br>

    and then maybe some specific CSS for the checkbox input

    input[type="checkbox"]
  {
    width:20px
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search