單選按鈕和標籤顯示在同一行

Question

爲什麼我的標籤和單選按鈕不會保持在同一行，我該怎麼辦？

這裏是我的形式：

<form name="submit" id="submit" action="#" method="post"> 
      <?php echo form_hidden('what', 'item-'.$identifier);?> 

      <label for="one">First Item</label> 
      <input type="radio" id="one" name="first_item" value="1" /> 

      <label for="two">Second Item</label> 
      <input type="radio" id="two" name="first_item" value="2" />    <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" /> 
      </form> 

Answer 1

如果您使用HTML結構我佈局in this question您可以簡單地將您的標籤和輸入浮動到左邊並調整填充/邊距，直到排列好的東西。

是的，你會想讓你的單選按鈕有一箇舊的IE類名稱。並有個個在同一行，根據我掛到上面的標記，它會像這樣：

<fieldset> 
    <div class="some-class"> 
    <input type="radio" class="radio" name="x" value="y" id="y" /> 
    <label for="y">Thing 1</label> 
    <input type="radio" class="radio" name="x" value="z" id="z" /> 
    <label for="z">Thing 2</label> 
    </div> 
</fieldset> 

意味着你啓動的CSS將是這樣的：

fieldset { 
    overflow: hidden 
} 

.some-class { 
    float: left; 
    clear: none; 
} 

label { 
    float: left; 
    clear: none; 
    display: block; 
    padding: 2px 1em 0 0; 
} 

input[type=radio], 
input.radio { 
    float: left; 
    clear: none; 
    margin: 2px 0 0 2px; 
} 

Answer 2

我不能使用代碼來重現谷歌瀏覽器4.0，IE8，或Firefox 3.5的問題。標籤和單選按鈕保持在同一行。

試着將它們都放在<p>標籤內，或者將單選按鈕設置爲像Elite Elite紳士建議的那樣內聯。

Answer 3

嗯。默認情況下，<label>是display: inline;和<input>（大致至少）是display: inline-block;，所以它們應該在同一行上。請參閱http://jsfiddle.net/BJU4f/

也許樣式表設置爲label或input至display: block？

Answer 4

我用這個代碼和工作得很好：

input[type="checkbox"], 
input[type="radio"], 
input.radio, 
input.checkbox { 
    vertical-align:text-top; 
    width:13px; 
    height:13px; 
    padding:0; 
    margin:0; 
    position:relative; 
    overflow:hidden; 
    top:2px; 
} 

您可能需要重新調整頂部的值（取決於你line-height）。如果你不想要IE6的兼容性，你只需要把這段代碼放到你的頁面中即可。否則，您必須爲您的輸入添加額外的類（您可以使用jQuery或任何其他庫） - ）

Answer 5

將它們都放到display:inline。

Answer 6

您可能有寬度爲您的輸入指定標籤在您的某個地方css。

添加一個class="radio"到您的收音機框和一個input.radio {width: auto;}到您的CSS。

Answer 7

如果問題在於當窗口太窄時標籤和輸入包裝爲兩行，請刪除它們之間的空白;例如： -

<label for="one">First Item</label> 
<input type="radio" id="one" name="first_item" value="1" /> 

如果你需要的元素之間的空間中，使用非打破空間（ ）或CSS。

Answer 8

我總是做的只是將單選按鈕包裹在標籤內......

<label for="one"> 
<input type="radio" id="one" name="first_item" value="1" /> 
First Item 
</label> 

這樣的事情，一直爲我工作。

Answer 9

我假設問題在於，當窗口太窄時，它們將包裝到單獨的行上。正如其他人指出的那樣，默認情況下，標籤和輸入應該是「display：inline;」，所以除非您有其他樣式規則正在改變這種規則，否則它們應該在有空間的情況下在同一行上呈現。

如果不更改標記，將無法使用唯一的CSS來修復此問題。

修復它的最簡單方法是將單選按鈕和標籤包裝在塊元素中，如p或div，然後阻止使用white-space:nowrap進行包裝。例如：

<div style="white-space:nowrap;"> 
    <label for="one">First Item</label> 
    <input type="radio" id="one" name="first_item" value="1" /> 
</div> 

Answer 10

我從不同的崗位上同一主題的回答可以幫助你zend form for multicheckbox remove input from labels

Answer 11

注：傳統上使用標籤標記的是菜單。例如：

<menu> 
<label>Option 1</label> 
<input type="radio" id="opt1"> 

<label>Option 2</label> 
<input type="radio" id="opt2"> 

<label>Option 3</label> 
<input type="radio" id="opt3"> 
</menu> 

Answer 12

我有類似的問題，保持在同一行上的所有單選按鈕。在嘗試了所有我能做的事情之後，除了以下內容外，沒有什麼能夠爲我工作我的意思是簡單地使用表格解決了允許單選按鈕出現在同一行中的問題。

<table> 
<tr> 
    <td> 
     <label> 
      @Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name 
     </label> 
    </td> 
    <td> 
     <label> 
      @Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date 
     </label> 
    </td> 
</tr> 
</table> 

Answer 13

我一直避免使用float:left，而是我用display: inline

.wrapper-class input[type="radio"] { 
 
    width: 15px; 
 
} 
 

 
.wrapper-class label { 
 
    display: inline; 
 
    margin-left: 5px; 
 
    }

<div class="wrapper-class"> 
 
    <input type="radio" id="radio1"> 
 
    <label for="radio1">Test Radio</label> 
 
</div>