CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nathan
Nathan

Reputation: 2513

Inline checkbox next to a h3 header

I'm trying to put a simple checkbox inline to the left of a header, i've tried to add the inline css as below but it still does align.

 <input type="checkbox" style="display:inline"/><h3>Header Text</h3>

I have a list that i would like the user to select, hence why i would like checkbox next to each one.

Upvotes: 1

Views: 3208

Answers (2)

Dino
Dino

Reputation: 309

h3 tag takes whole width you have to set the CSS style to h3 no need to set for checkbox.

The following code will help you

<input type="checkbox"/><h3 style="display:inline">Header Text</h3>

Upvotes: -1

jbutler483
jbutler483

Reputation: 24559

The h3 element is a block element by default (i.e. 100% width, so it won't fit anything else on that line)

Alter it to inline-block and you'll see that it should work fine (it also means that you can remove the inline styling of the checkbox, as well):

h3 {
  display: inline-block;
}
<input type="checkbox" />
<h3>Header Text</h3>

Upvotes: 5

Related Questions