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

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结构,你可以简单地浮动你的标签并输入到左边并调整填充/边距直到排成一行.

是的,你会想让你的单选按钮具有旧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;}你的CSS.

Answer 4

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

Answer 5

嗯.默认情况下,<label>是display: inline;和<input>(大致,至少)display: inline-block;,所以它们都应该在同一条线上.见http://jsfiddle.net/BJU4f/

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

Answer 6

把它们都放进去display:inline.