如何在标签下方水平对齐单选按钮 [英] 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屋!
查看全文