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

为什么我的标签和单选按钮不会停留在同一行，该怎么办？

这是我的表格：

<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结构，则只需将标签浮动并输入到左侧，然后调整填充/边距，直到所有内容对齐为止。

是的，您需要使单选按钮具有旧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>

我一直做的就是将单选按钮包裹在标签内...

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

像这样的东西，一直为我工作。

您可能在css中某处为输入标签指定了宽度。

class="radio"在您的收音机框中添加一个，并input.radio {width: auto;}在您的CSS中添加一个。

将它们都放到display:inline。

嗯 默认情况下，<label>isdisplay: inline;和<input>is（大约，至少）display: inline-block;，因此它们应该在同一行。参见http://jsfiddle.net/BJU4f/

也许一个样式表设置label或input到display: block？

我假设问题是，当窗口太窄时，它们将包裹在单独的行上。正如其他人指出的那样，默认情况下，标签和输入应为“ display：inline;”，因此，除非您有其他更改此样式的样式规则，否则如果有空间，它们应在同一行上呈现。

如果不更改标记，将无法仅使用CSS来解决此问题。

修复此问题的最简单方法是将单选按钮和标签包装在块元素（例如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>

我总是避免使用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>

我使用此代码，效果很好：

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-或任何其他库-））

**使用表格将单选和文本对齐在一行中

<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>

**

使用该代码，我无法在Google Chrome 4.0，IE8或Firefox 3.5中重现您的问题。标签和单选按钮位于同一行。

尝试将它们都放置在<p>标签中，或将单选按钮设置为嵌入式，如The Elite Gentleman建议的那样。

我对同一主题的不同帖子的回答应帮助您修改多复选框的表单，从标签中删除输入

注意：传统上，标签是用于菜单的。例如：

<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>

我遇到了类似的问题，那就是将所有单选按钮保持在同一行。在尝试了所有可能的方法之后，除以下各项外，对我没有任何帮助。我的意思是简单地使用表格解决了允许单选按钮出现在同一行中的问题。

<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>

如果问题是当窗口太窄时标签和输入会换成两行，请删除它们之间的空白；否则，请转至第二行。例如：

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

如果元素之间需要空格，请使用不间断空格（& nbsp;）或CSS。

fieldset {
  overflow: hidden
}

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

label {
  float: left;
  clear: both;
  display:initial;
}

input[type=radio],input.radio {
  float: left;
  clear: both;     
}