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

-1

我有一个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/）。

来源

2016-11-17 Jeff Walden

链接：-http：//stackoverflow.com/questions/2306117/radio-buttons-and-label-to-display-in-same-line –

如果可能，请尝试在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>

来源

2016-11-17 16:16:18 k97513

这个工作！任何想法如何缩进第二行包装文本，以便它与第一行垂直显示？ http://pastebin.com/P6kgifw5 –

查看更新后的帖子。 – k97513

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

回答

相关问题