ramzez
Coder
I ran into a problem with my html/css form.
I have radio buttons and checkboxes in my form. I want them to display like this:
It works in Codepen.io when I edit them, but as soon as I click somewhere or open de preview in a new window, it looks like this:
I used display: block; and float: left; to get this result.
Link: to the pen: https://codepen.io/hadassahreuvekamp/pen/yLzpebj
So why does this happen? Any tips on how to organize the checkboxes?
Thanks!
I have radio buttons and checkboxes in my form. I want them to display like this:
It works in Codepen.io when I edit them, but as soon as I click somewhere or open de preview in a new window, it looks like this:
I used display: block; and float: left; to get this result.
CSS:
.input-radio, .input-checkbox {
display: block;
float: left;
margin-right: 0.5rem;
min-height: 1rem;
min-width: 1.5rem;
margin-top: 4px;
vertical-align: middle;
}
HTML:
<div class="form-group">
<p>Are you a part of the BUK girls discord channel?</p>
<label for="radio1">
<input type="radio" id="radio1"
name="discordchannel"
value="yes"
class="input-radio">
Yes </label>
<label for="radio2">
<input type="radio" id="radio2"
name="discordchannel"
value="no"
class="input-radio">
No </label>
</div>
Link: to the pen: https://codepen.io/hadassahreuvekamp/pen/yLzpebj
So why does this happen? Any tips on how to organize the checkboxes?
Thanks!