单选按钮和标签显示在同一行

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>