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

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

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

这样的事情一直对我有用。

Answer 3

您可能会在 css 中的输入标记处指定宽度。

在您的广播电台框中添加class="radio"，向您的广告管理系统添加input.radio {width: auto;}。

Answer 4

嗯。默认情况下，<label>为display: inline;，<input>（大致，至少）为display: inline-block;，因此它们都应位于同一行。见http://jsfiddle.net/BJU4f/

样式表可能会将label或input设置为display: block吗？

Answer 5

将它们都放到display:inline。

Answer 6

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

如果不更改标记，就无法使用CSS修复此问题。

修复它的最简单方法是将单选按钮和标签包装在块元素中，例如p或div，然后使用{{1 }}。例如：

white-space:nowrap

Answer 7

我使用此代码并且运行正常：

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 8

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

＆＃13;

.wrapper-class input[type="radio"] {
  width: 15px;
}

.wrapper-class label {
  display: inline;
  margin-left: 5px;
  }

＆＃13;

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

＆＃13;

Answer 9

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

尝试将它们放在<p>标记内，或者将单选按钮设置为像The Elite Gentleman建议的那样内联。

Answer 10

如果问题是当窗口太窄时标签和输入被包装到两行，则删除它们之间的空白; e.g：

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

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

Answer 11

我对同一主题的其他帖子的回答应该会对您有所帮助zend form for multicheckbox remove input from labels

Answer 12

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

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

我遇到了将所有单选按钮保持在同一行的类似问题。在尝试了所有我能做的事情之后，除了以下内容之外没有任何对我有用。我的意思是简单地使用表解决了允许单选按钮出现在同一行中的问题。

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

fieldset {
  overflow: hidden
}

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

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

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

Answer 15

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

<div style="left: 0px !important;width:100%">
  <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>

**

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

15 个答案: