如何在同一行显示单选按钮和标签？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-11-04 03:06:29

原创

491 人浏览过

How to Display Radio Buttons and Labels on the Same Line?

单选按钮和标签的同行显示

创建表单时，可能需要有单选按钮及其相应的标签显示在同一行。但是，默认情况下，单选按钮显示在其标签下方。

尝试对齐单选按钮和标签时遇到以下问题：

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

登录后复制

在这种情况下，单选按钮显示在其下方标签。为了解决这个问题，实施了以下解决方案：

将标签和输入元素浮动到左侧并调整填充和边距，直到实现对齐。

此外，为了获得最佳兼容性，请添加一个类旧版本 Internet Explorer 的单选按钮的名称。

对于同一行上有多个单选按钮的表单，建议的标记为：

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

登录后复制

使用以下 CSS：

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

label {
    float: left;
    display: block;
    padding: 0 1em 0 8px;
}

input[type=radio] {
    float: left;
    margin: 2px 0 0 2px;
}

登录后复制

通过实现这些技术，可以实现单选按钮和标签的同行显示。

以上是如何在同一行显示单选按钮和标签？的详细内容。更多信息请关注PHP中文网其他相关文章！