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

【问题标题】：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>

【问题讨论】：

你的问题不是很清楚。你到底想做什么？
请添加更多细节，你想要的样子，目前看起来不错。

标签： html css button label radio

【解决方案1】：

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

首先不要将<input> 包裹在<label> 中，而是这样做：
{标签}
然后对于 css ：

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

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

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

【讨论】：