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

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

但是我一直没有按下错位按钮，如下所示

我在这里可能会缺少什么？

Answer 1

据我所知，你想要这个

＆＃13;

＆＃13;

QOpenGLContext

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：

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

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

首先，元素的ID为.radioGroup label input[type="radio"] { display: block; margin: 0.5em auto; } 而不是

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

Answer 2

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

$script:i

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

这可确保单选按钮直接在各自的标签下水平居中。