单选button和标签显示在同一行
为什么我的标签和单选button不会保持在同一行，我该怎么办？
这是我的forms：
<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> 如果你使用HTML结构，我可以简单地将你的标签和input浮动到左边，然后调整填充/边距，直到排列好。
是的，你会想让你的单选button有旧的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; }
我总是做的只是将单选button包裹在标签内
<label for="one"> <input type="radio" id="one" name="first_item" value="1" /> First Item </label>
像这样的东西，一直为我工作。
你可能有一个宽度为你的CSS的 input标签指定。
添加一个class="radio"到您的收音机框和input.radio {width: auto;}到您的CSS。
把他们都display:inline 。
嗯。 默认情况下， <label>是display: inline; 和<input>是（大概至less） display: inline-block; ，所以他们都应该在同一条线上。 见http://jsfiddle.net/BJU4f/
也许样式表设置label或input display: block ？
我假设问题在于当窗口太窄时，它们正在分隔线上。 正如其他人指出的那样，默认情况下，标签和input应该是“display：inline”，所以除非你有其他的样式规则正在改变这个，否则如果有空间的话，它们应该在同一行上呈现。
在不改变标记的情况下，仅使用CSS就无法解决这个问题。
解决这个问题的最简单的方法是将单选button和标签包装在一个块元素中，比如一个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>
我使用这个代码，工作得很好：
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的兼容性，你只需要把这个代码到你的页面。 否则，你将必须添加额外的类到你的input（你可以使用jQuery或任何其他库）
我无法使用该代码在Google Chrome 4.0，IE8或Firefox 3.5中重现您的问题。 标签和单选button保持不变。
尝试把它们都放在一个<p>标签中，或者把单选button设置成像精英绅士build议的那样内联。
我从同一主题的不同post的答案应该可以帮助你从多标签盒中删除input的zend表单
注意：传统上使用标签标签是用于菜单。 例如：
<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>
我有类似的问题，保持在同一行上的所有单选button。 在尝试了所有我能做的事情之后，除了下面的内容外，没有任何东西可以工 我的意思是简单地使用表格解决了允许单选button出现在同一行的问题。
<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>
如果问题在于当窗口太窄时标签和input包装成两行，请删除它们之间的空白; 例如：
<label for="one">First Item</label> <input type="radio" id="one" name="first_item" value="1" />
如果元素之间需要空格，请使用非分隔空格（ & nbsp; ）或CSS。
我总是避免使用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>
