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

小编典典

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

html

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

这是我的表格：

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

阅读 1602

2020-05-10

共1个答案

小编典典

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

2020-05-10