如何在标签下方水平对齐单选按钮答案

【问题标题】：How to align radio buttons horizontally below labels如何在标签下方水平对齐单选按钮
【发布时间】：2015-09-17 16:54:30
【问题描述】：

所以我使用下面的 HTML 来显示 4 个水平居中的单选按钮，它们在 jsp 中各自的标签下方：

<s:form action="markUser" name="markUser" method="post" namespace="/secure/admin">
    <div id="radioGroup">

        <label for="markStudent">Mark User as Student</label>
        <input type="radio" name="mark" id="markStudent" value="Student" />

        <label for="markAdmin">Mark User as Admin</label>
        <input type="radio" name="mark" id="markAdmin" value="Admin" />

        <label for="markService">Mark User as Service</label>
        <input type="radio" name="mark" id="markService" value="Service" />

        <label for="markNull">Mark User as Null</label>
        <input type="radio" name="mark" id="markNull" value="Null" />

    </div>
</s:form>

还有 CSS：

.radioGroup label {
  display: inline-block;
  text-align: center;
  margin: 0 0.2em;
}
.radioGroup label input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

但我不断收到如下未对齐的按钮

我可能在这里遗漏了什么？

【问题讨论】：

您想要文本右侧的单选按钮吗？
您是否希望所有标签都是水平的并且每个标签下方的每个单选按钮？
否，水平对齐，按钮在每个对应标签正下方居中
我尝试删除标签，结果相同：/

标签： html css radio-button alignment

【解决方案1】：

据我了解，你想要这个

#radioGroup .wrap {
  display: inline-block;
}
#radioGroup label {
  display: block;
  text-align: center;
  margin: 0 0.2em;
}
#radioGroup input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

<div id="radioGroup">
  <div class="wrap">
    <label for="markStudent">Mark User as Student</label>
    <input type="radio" name="mark" id="markStudent" value="Student" />
  </div>

  <div class="wrap">
    <label for="markAdmin">Mark User as Admin</label>
    <input type="radio" name="mark" id="markAdmin" value="Admin" />
  </div>
  <div class="wrap">
    <label for="markService">Mark User as Service</label>
    <input type="radio" name="mark" id="markService" value="Service" />
  </div>
  <div class="wrap">
    <label for="markNull">Mark User as Null</label>
    <input type="radio" name="mark" id="markNull" value="Null" />
  </div>
</div>

注意：

这在两个方面是不正确的：

.radioGroup label input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

首先，元素的 ID 为 radioGroup 而不是类

其次，输入不是标签的子，而是兄弟

【讨论】：

【解决方案2】：

您可以将单选按钮放在标签内并稍微更改 CSS。

.radioGroup label {
  display: inline-block;
  margin: 0 0.2em;
  text-align: center;
}
.radioGroup label input[type="radio"] {
  margin: 0.5em auto;
}

<div class="radioGroup">
        <label for="markStudent">Mark User as Student<br />
            <input type="radio" name="mark" id="markStudent" value="Student" />
        </label>
        <label for="markAdmin">Mark User as Admin<br />
            <input type="radio" name="mark" id="markAdmin" value="Admin" />
        </label>
        <label for="markService">Mark User as Service<br />
            <input type="radio" name="mark" id="markService" value="Service" />
        </label>
        <label for="markNull">Mark User as Null<br />
            <input type="radio" name="mark" id="markNull" value="Null" />
        </label>
    </div>

这确保单选按钮将在其各自标签的正下方水平居中。

【讨论】：