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

Question

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

90

为什么我的标签和单选按钮不能保持在同一行？我该怎么做？

这是我的表单：

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

- Gandalf StormCrow

2

你能展示整个页面和相应的CSS吗？如果你只把你提供的代码片段放在HTML页面的主体中，那么所有内容都会在同一行上，因此必须有一些CSS规则来防止这种情况发生。 - Darin Dimitrov

@Darin Dimitrov，我有一个很大的CSS文件，把它贴在这里不是一个好主意，我应该在里面寻找什么（有多个样式表），或者如何将其单独设置样式？ - Gandalf StormCrow

@eyazici <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> - Gandalf StormCrow

1

尝试安装Firebug并使用“检查”功能列出应用于您的元素的CSS规则。 - Tobias Cohen

显然，我晚了四年才做到这一点，但是这是您的表格，您的单选按钮和标签在同一行上：http://jsfiddle.net/BJU4f/ 请提供能够重现问题的代码。 - Paul D. Waite

显示剩余3条评论

15个回答

73

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

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

我一直都是用这种方式解决这个问题的。

- animuson

8

自身无法解决问题，标签内部的文字可能会被分成不同的行。您需要将标签样式设置为 display:block 或 white-space:nowrap。此外，我不确定将输入框放在标签内是否符合语义学要求。 - Tom

12

将输入框包裹在标签元素内是有效的。请参阅http://www.w3.org/TR/html5/forms.html#the-label-element。 - Erwin

5

将输入框包裹在标签内的好处在于，它使文本可以点击以激活单选按钮，而用户无需直接点击单选按钮，这对于使用移动设备且没有鼠标指针所提供的精确点击准确度的人非常有用。 - MistyDawn

11

您可能已经在 CSS 中为 input 标签指定了宽度。

请将一个名为 radio 的类添加到您的单选框上，并在您的 CSS 中添加 input.radio {width: auto;}。

- Alexar

1

更好的做法是在你的CSS中使用输入类型选择器，而不是添加一个新类。你可以简单地添加 input:radio { /* 样式 */ } 或 input[type="radio"] { /* 样式 */ } 到你的CSS中。当你应用于所有单选框元素时，没有必要使用单独的类来指定样式规则。 - MistyDawn

9

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

- Ross

7

将它们都设置为display:inline。

- casraf

5

默认情况下，<label> 是 display: inline;，<input> 大致上是 display: inline-block;，因此它们应该在同一行。参见http://jsfiddle.net/BJU4f/。也许样式表将 label 或 input 设置为 display: block？

- Paul D. Waite

4

我猜问题出在窗口太窄时它们会换行。如其他人所指出的，标签和输入框默认应该是"display:inline;"，因此，除非您还有其他样式规则更改了这一点，否则如果有空间，它们应该渲染在同一行上。

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

最简单的方法是将单选按钮和标签包装在块元素中，例如

或

，然后使用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>

- Tom

2

使用表格来将单选框和文本对齐在同一行

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

**

- Raushan Kumar

1

请添加简要说明您所做的事情，以便作者更好地理解您的解决方案。 - giuseppedeponte

1

我使用这段代码，它运行得非常好：

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或任何其他库来实现这一点;)）

- Ionuț Staicu

1

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

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

- soren121

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user241244 · Accepted Answer

如果您使用我在此问题中提供的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>