Align Checkbox And Label

Question

I have a form which code looks like this:

Solution 1:

One option is to amend the style of the label element that follows the checkbox:

input[type=checkbox] + label {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 2em;
    line-height: 1em;
}

JS Fiddle demo.

This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.

As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:

input[type=checkbox] {
    float: left;
    margin-right: 0.4em;
}

JS Fiddle demo.

Solution 2:

It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line. Change it to display: inline-block or leave the display rule away and you're done.

Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.

Solution 3:

Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.

Baca Juga

<label for="checkbox">
    <input id="checkbox"type="checkbox"> My Label
</label>

Solution 4:

Forked your fiddle here with one small change. I nested the checkbox inside the label.

<labelfor="agree"><inputtype="checkbox"name="agree">Accept the terms</label>

Hope it helps.

Solution 5:

All you need to do is add display: inline to the label. Like this:

label[for="agree"] {
  display: inline;
}

You may also have to add the following to get the Send button to stay on its own line:

button[type="submit"] {
  display: block;
}

That is enough to make it work, but you could also nest the input inside the label, like this:

<labelfor="agree"><inputtype="checkbox"name="agree" />
  Accept the terms
</label>

However, most people avoid doing this because it is semantically constricting. I would go with the first method.

Html5 Info