I have chosen to use labels for my radio buttons because I enjoy the convenience of being able to click on the text to select the option. However, I want these labels to appear in a vertical list format. Currently, they are displaying as blocks, causing them to spread across the entire page and allowing users to accidentally activate an option by clicking on the white space next to the label.
I am aware that I can wrap the labels in a div and set the display property to block while setting the contained label's display property to inline-block. While this solution works, it would require me to make adjustments to hundreds of labels, so I would prefer to achieve the desired layout using only CSS if possible.
Alternatively, I tried using float: left and clear: both to achieve the desired effect. However, this caused issues with other elements on the page not displaying properly and being significantly impacted by these changes.
label {
display: block;
cursor: pointer;
}
<label>
<input type="radio"/>
answer
</label>
<label>
<input type="radio"/>
answer
</label>
<label>
<input type="radio"/>
answer
</label>
<label>
<input type="radio"/>
answer
</label>