How to align radio buttons horizontally below labels
So, I'm using the following HTML to display 4 radio buttons horizontally under their respective labels in 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>
And the 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 inconsistent buttons like the following
What am I missing here?
+3
source to share
2 answers
As I understand you want this
#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:
This is not true on two fronts:
.radioGroup label input[type="radio"] {
display: block;
margin: 0.5em auto;
}
First, the element has an identifier radioGroup
not class
Second, the input is not a child label, but rather a native
+2
source to share
You can put radio buttons inside labels and change the CSS a bit.
.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>
This will ensure that the radio buttons are horizontally centered directly below their respective labels.
0
source to share