html - 将单选按钮和标签保持在同一行

Question

我遇到了一个 CSS 问题，如果标签跨越多行，则单选按钮和标 checkout 现在不同的行上。这是一个例子:

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

看到单选选项后长线是如何断开的吗？长标签体应跨越两行，但应与单选选项内联，例如:

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

这是我的 CSS

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

最后是 HTML

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

我似乎无法弄清楚为什么会这样。如果有帮助，我正在使用骨架框架 ( http://getskeleton.com/ )。

Answer 1

如果可能，请尝试删除 span.label-body 上的 inline-block。这会将 span 设置在与单选按钮相同的行中，因为默认情况下它是内联的。

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>