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

-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

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

回答

相關問題