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

Question

我正在使用以下HTML在jsp中水平居中显示4个单选按钮及其各自标签：

<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;
}

但我一直遇到像下面这样不对齐的按钮

我可能错过了什么？

- Sean

---

您希望将单选按钮放置在文本的右侧吗？ - Adam

您想要所有标签水平排列，每个单选按钮位于其下方吗？ - MiiinimalLogic

不，与按钮水平对齐，位于每个相应标签的正下方居中。 - Sean

我尝试去掉标签，结果仍然一样:/ - Sean

Answer 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而不是类。

其次，输入框不是标签的子元素，而是一个同级元素。

- Paulie_D

Answer 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>

这样可以确保单选按钮在其相应标签的水平中心位置。

- Jacob