對單選按鈕錯誤地包裝文本

我有2個html單選按鈕（用<br />標記分隔），其中文本包裝單選按鈕而不是與左縮進（由於它包含div的大小）對齊。文本包裝不是問題，問題在於它正在單選按鈕本身下包裝不正確，而不是與其上方的文本對齊。我假設某人在層疊中的某處設置了輸入標籤。我沒有詳細搜索附加到這個頁面的所有樣式，但不應該文本自動包裝正確，就像一個項目符號列表？
enter image description here 對單選按鈕錯誤地包裝文本

如果不是，我該如何解決這個問題？我是否需要插入一個<br />標籤，我希望線條斷開以便它們正確對齊？

謝謝！

來源

2011-10-07 Chris22

你可以添加你擁有的[jsFiddle]（http://jsfiddle.net/）嗎？或者只是添加您當前的HTML？它會回答我的幾個問題，例如：您是否在使用''？ – thirtydot

下面是我將嘗試的解決方案：[link]（http://stackoverflow.com/questions/911644/how-can-i-make-multi-line-vertically-and-horizontally-aligned-labels-for-radio- b）我不想寫一堆規則，只是修改我的東西......但它是一個解決方案。如果有人有更好的，請發佈。謝謝。 – Chris22

thirtydot，我沒有使用標籤。我並不確定如何使用它。將谷歌。但我已經看到使用它的其他帖子。 ''做了什麼？ – Chris22

首先，通常不推薦使用<br />，嘗試使用margin CSS屬性在元素之間創建空間會更好。

在這種情況下最好使用CSS來做你想做的事情。這是因爲默認情況下這些元素不會有這種行爲。

在這種情況下，你會想要的東西，看起來像這樣：

<div style="width:300px"> 
    <input type="radio" class="radioLeft" /> 
    <div class="textBlock"> 
     Some text that is too long to fit inline and must be broken 
     up over multiple lines.Some text that is too long to fit inline 
     and must be broken up over multiple lines.Some text that is too 
     long to fit inline and must be broken up over multiple lines. 
    </div> 
    <div style="clear:both;"></div> //this is important for repeated inputs 
</div>

然後你的CSS是這樣的：

.radioLeft 
{ 
    float: left; 
} 

.textBlock 
{ 
    float: left; 
    width: 80%; //Adjust this value to fit 
}

來源

2011-10-07 16:56:39 Eganr

Eganr中使用''，文本被包裹在單選按鈕下。我把它放在一個div寬度：300px。但是，這應該不重要，對吧，因爲'.textblock'類的寬度較小？我添加了一個jsfiddle（上面）我的代碼。 – Chris22

http://jsfiddle.net/Chris22/G3RE7/2/ – Chris22

出於某種原因，我無法在工作中看到jsfiddle，可以粘貼代碼或使用替代方法。我忘了的一件事是radioLeft類的結尾報價。我也更新了我的答案。這裏是我的CSSDesk現場示例：http://cssdesk.com/FwpGr – Eganr

您可以簡單地使用CSS來強制文本換行正確。我假設你有一個<span>標籤中的文本，所以你可以使用以下方法來調整自己的立場：

span { 
    display: block; 
    margin-top: -16px; 
    margin-left: 28px; 
}

希望這有助於！託梅爾

來源

2011-10-08 00:29:10

對不起，回答這個這麼晚了，我只是碰到這個帖子來了，這裏是另一種解決方案：

p { margin-left: 20px; text-indent: -20px; }

來源

2013-05-08 18:53:25 davewoodhall

答案2015年：
由於沒有其他soultions的工作對我來說，這裏的我該怎麼做：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Radiobutton labels aligned</title> 
<style type="text/css"> 
    div { display:table-row; } 
    div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */ 
    div label { display:table-cell; } 
</style> 
</head> 
<body> 
<form> 
<div> 
    <span><input type="radio" id="a"></span> 
    <label for="a">First button's label<br>First button's label</label> 
</div> 
<div> 
    <span><input type="radio" id="b"></span> 
    <label for="b">Second button's label</label> 
</div> 
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label> 
</form> 
</body> 
</html>

見http://jsfiddle.net/8jzss08p/
作品中：火狐41，鍍鉻45，Internet Explorer 11

來源

2015-10-14 14:53:06

很好的答案。像魅力一樣工作。 – Olaf

使用
打破了界限？這不是粗俗的嗎？文本應該換行然後縮進。 – Chiwda

工程很棒。這應該被接受的答案。 – pk1557

對單選按鈕錯誤地包裝文本

回答

相關問題