如何在标签下方水平对齐单选按钮 [英] How to align radio buttons horizontally below labels

问题描述

因此，我正在使用以下HTML在一个jsp中将4个单选按钮显示在其各自标签下方的水平居中位置：

So I am using the following HTML to display 4 radio buttons horizontally centered underneath their respective labels in a 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;
}

但是我一直像下面这样错位

But I keep getting misaligned buttons like the following

我这里可能会缺少什么？

What might I be missing here?

推荐答案

据我了解，您想要这个

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

注意：

这在两个方面都是错误的：

This is incorrect on two fronts:

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

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

Firstly, the element has an ID of radioGroup not class

第二，输入内容不是标签的子，而是同级

Secondly, the input is not a child of the label but rather a sibling

这篇关于如何在标签下方水平对齐单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！