Keep radio button and label on the same line

Question

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/).

Link:-http://stackoverflow.com/questions/2306117/radio-buttons-and-label-to-display-in-same-line — Razia sultana, Nov 17 '16 at 16:24

kzhao14 · Accepted Answer · 2016-11-17T16:35:23.827

1

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>

edited Nov 17 '16 at 16:35

answered Nov 17 '16 at 16:16

kzhao14

2,470
14
21

This worked! Any idea how I can indent the 2nd line of wrapping text so it appears in line vertically with the first line? http://pastebin.com/P6kgifw5 – Jeff Walden Nov 17 '16 at 16:28

Keep radio button and label on the same line

1 Answers1