因此,我使用以下 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>
And CSS:
.radioGroup label {
display: inline-block;
text-align: center;
margin: 0 0.2em;
}
.radioGroup label input[type="radio"] {
display: block;
margin: 0.5em auto;
}
但我总是遇到如下所示的未对齐按钮
我在这里可能会缺少什么?
据我了解你想要这个
#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>
Note:
这在两个方面是不正确的:
.radioGroup label input[type="radio"] {
display: block;
margin: 0.5em auto;
}
首先,该元素的 ID 为radioGroup
不上课
其次,输入不是child标签而是一个sibling
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)