时间戳

首页 > 解决方案 > 单选按钮和相关标签未对齐

html - 单选按钮和相关标签未对齐

问题描述

单选按钮显示如附加图像。如何对齐标签和按钮。

input[type="radio"] {
    width: 18px;
    min-width: auto;
    display: inline-block;
}
<label><input type="radio" name="myRadios1" id="myRadios1" value="Yes" ONCLICK="show_info_block(this.value)" />Yes</label>
<label><input type="radio" name="myRadios2" id="myRadios2" value="No" ONCLICK="show_info_block(this.value)" />No</label>

标签： htmlcssbuttonlabelradio

解决方案

我有 2 个解决方案，但我认为其中一个更好：

  1. 首先不要包裹你<input>，<label>而是这样做：

    {标签}

  2. 然后对于 css ：

    .label-container { 显示：弹性；对齐项目：居中；}

    输入[类型='收音机'] {边距：自动；}

您可以使用 display flex 和 align-items: center 为每个标签使用您自己的代码，但我认为它根本不干净。

推荐阅读