单选按钮和标签显示在同一行 [英] Radio buttons and label to display in same line

问题描述

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

Why my labels and radio buttons won't stay in the same line, what can I do ?

这是我的表单：

<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结构， href =http://stackoverflow.com/questions/2350152/documentation-on-fieldset-label-tags-instead-of-using-tables/2350481#2350481>在此问题，您可以简单地将您的标签和输入到左边，并调整填充/边距，直到排列好。

If you use the HTML structure I lay out in this question you can simply float your label and input to the left and adjust padding/margin until things are lined up.

是的，你想让你的单选按钮有一个类名为old IE。要使所有在同一行上，根据我上面链接的标记，它将是这样：

And yes, you'll want to make your radio button have a class name for old IE. And to have all of them on the same line, according to the markup I linked to above, it would be like so:

<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将是：

means your starter CSS would be something like:

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

这篇关于单选按钮和标签显示在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！