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

Posted 2023-03-27

【中文标题】单选按钮和相关标签未对齐

【英文标题】：Radio Button and associated Label not aligned

【发布时间】：2021-08-05 04:31:09

【问题描述】：

单选按钮的显示方式与所附图片一样。如何对齐标签和按钮。

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>

【问题讨论】：

你的问题不是很清楚。你到底想做什么？

请添加更多细节，你想要的样子，目前看起来不错。

【参考方案1】：

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

首先不要将<input> 包裹在<label> 中，而是这样做：

标签

然后对于 css ：

.label-container 显示：弯曲； 对齐项目：居中；

输入[type='radio'] 边距：自动；

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