CODEWITHSUNDEEP
htmlcss
Jeff Walden
Jeff Walden

Reputation: 321

Keep radio button and label on the same line

I'm having a CSS issue where the radio button and label are appearing on different lines if the label spans multiple lines. Here is an example:

() Option A
() Option B
()
  Option C is really long so it
  will span two lines
() Option D

See how the long lines are breaking after the radio option? The long label-body should span two lines, but it should be inline with the radio option such as:

() Option C is really long so it
   will span two lines

Here's my CSS

input[type="radio"] {
  display: inline;
  margin-bottom: 0px; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

And finally the HTML

<label>
  <input type="radio"> <span class="label-body">Option A</span>
</label>

I can't seem to figure out why this is happening. If it helps, I'm using the Skeleton framework (http://getskeleton.com/).

Upvotes: 0

Views: 6675

Answers (1)

kzhao14
kzhao14

Reputation: 2640

Try removing the inline-block on the span.label-body, if possible. This sets the span in the same line as the radio button, because by default it is inline.

div {
  width: 200px;
}
input[type="radio"] {
  display: inline;
  margin-bottom: 0px; }
label > .label-body {
  margin-left: .5rem;
  font-weight: normal; 
}
span {
  position:absolute;
  width: 100px;
  left: 30px;
}
<div>
  <label>
     <input type="radio"><span class="label-body">really long label that should span more than one line because it is really long</span>
  </label>
</div>

Upvotes: 2

Related Questions