Html 单选按钮和标签显示在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2306117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio buttons and label to display in same line
提问by Gandalf StormCrow
Why my labels and radio buttons won't stay in the same line, what can I do ?
为什么我的标签和单选按钮不会保持在同一行，我该怎么办？
Here is my form:
这是我的表格：
<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>
回答by
If you use the HTML structure I lay out in this questionyou can simply float your label and input to the left and adjust padding/margin until things are lined up.
如果您使用我在这个问题中列出的 HTML 结构，您可以简单地将标签和输入浮动到左侧并调整填充/边距，直到排列整齐。
And yes, you'll want to make your radio button have a class name for old IE. And to have allof them on the same line, according to the markup I linked to above, it would be like so:
是的，你会想让你的单选按钮有一个旧 IE 的类名。并有所有他们在同一行，据我连接到上面的标记，它会像这样：
fieldset {
overflow: hidden
}
.some-class {
float: left;
clear: none;
}
label {
float: left;
clear: none;
display: block;
padding: 0px 1em 0px 8px;
}
input[type=radio],
input.radio {
float: left;
clear: none;
margin: 2px 0 0 2px;
}<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>回答by animuson
What I've always done is just wrap the radio button inside the label...
我一直做的只是将单选按钮包裹在标签内......
<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>
Something like that, has always worked for me.
像这样的东西，一直对我有用。
回答by Alexar
you might have a widthspecified for your inputtags somewhere in your css.
您可能在css某处为输入标签指定了宽度。
add a class="radio"to your radio boxes and an input.radio {width: auto;}to your css.
将 a 添加class="radio"到您的单选框并添加input.radio {width: auto;}到您的 css。
回答by casraf
Put them both to display:inline.
把它们都放在display:inline.
回答by Paul D. Waite
Hmm. By default, <label>is display: inline;and <input>is (roughly, at least) display: inline-block;, so they should both be on the same line. See http://jsfiddle.net/BJU4f/
唔。默认情况下，<label>isdisplay: inline;和<input>is（至少大致display: inline-block;如此），因此它们应该在同一行上。见http://jsfiddle.net/BJU4f/
Perhaps a stylesheet is setting labelor inputto display: block?
也许样式表正在设置label或input到display: block？
回答by Tom
I'm assuming the problem is that they are wrapping onto separate lines when the window is too narrow. As others have pointed out, by default the label and input should be "display:inline;", so unless you have other style rules that are changing this, they should render on the same line if there is room.
我假设问题是当窗口太窄时它们会换到单独的行上。正如其他人指出的那样，默认情况下标签和输入应该是“display:inline;”，所以除非你有其他样式规则来改变这个，如果有空间，它们应该在同一行上呈现。
Without changing the markup, there will be no way to fix this using only CSS.
如果不更改标记，仅使用 CSS 将无法解决此问题。
The simplest way to fix it would be to wrap the radio button and label in a block element, such as a por a div, and then prevent that from wrapping by using white-space:nowrap. For example:
修复它的最简单方法是将单选按钮和标签包装在块元素中，例如 ap或 a 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>
回答by Ross
I always avoid using float:leftbut instead I use display: inline
我总是避免使用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>回答by Raushan Kumar
** Used table to align the radio and text in one line
** 使用表格在一行中对齐收音机和文本
<div >
<table>
<tbody>
<tr>
<td><strong>Do you want to add new server ?</strong></td>
<td><input type="radio" name="addServer" id="serverYes" value="1"></td>
<td>Yes</td>
<td><input type="radio" name="addServer" id="serverNo" value="1"></td>
<td>No</td>
</tr>
</tbody>
</table>
</div>**
**
回答by Ionu? Staicu
I use this code and works just fine:
我使用此代码并且工作正常：
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;
}
You may want to readjust top value (depends on your line-height). If you don't want IE6 compatibility, you just need to put this code into your page. Otherwise, you will must add extra class to your inputs (you can use jQuery - or any other library - for that tho ;) )
您可能想要重新调整最高值（取决于您的line-height）。如果您不想兼容 IE6，只需将此代码放入您的页面即可。否则，您必须为输入添加额外的类（您可以使用 jQuery - 或任何其他库 - 为此；））
回答by soren121
I wasn't able to reproduce your problem in Google Chrome 4.0, IE8, or Firefox 3.5 using that code. The label and radio button stayed on the same line.
我无法使用该代码在 Google Chrome 4.0、IE8 或 Firefox 3.5 中重现您的问题。标签和单选按钮保持在同一行。
Try putting them both inside a <p>tag, or set the radio button to be inline like The Elite Gentleman suggested.
尝试将它们都放在一个<p>标签中，或者像 The Elite Gentleman 建议的那样将单选按钮设置为内联。
