Jeff Walden Jeff Walden - 18 days ago 6
HTML Question

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

Answer

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; 
}
<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>

Comments