Question

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

() 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>

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

Answer 1

如果可能，请尝试删除span.label-body上的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; }设置为与单选按钮位于同一行，因为默认情况下它是内联的。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

1 个答案: