保持單選按鈕和標籤在同一行

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上刪除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>