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

发布于02月28日

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

这是我的表格:

<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 struct (我布局in this question)，您可以简单地将标签和输入浮动到左侧，并调整填充/边距，直到排列整齐.

是的，您会想让您的单选按钮有一个旧IE的类名.根据我在上面链接的标记，如果在同一行上有all个这样的标记，应该是这样的:

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>