1

I've created a simple quiz application. How can I vertically align text with radio buttons.? Here is the code- Codepen. The problem specially arises with long text labels. For example, in question no.9,12 & 14, the misalignment is pretty evident. I tried a lot of solutions available on stackoverflow, but none of them seem to be working for me.(eg:How to vertically align radio buttons with text on the same line?)

1
  • Because your label is taking the whole width. If you set the following CSS rule to your label: label{display:inline-block; width: 80%;} the lay-out will be fixed or use the option as @Goombah gave below
    – Rotan075
    Mar 14, 2016 at 14:57

2 Answers 2

4

Use

label
{
  display: inline;
}

Like here (Codepen)!

1

Just change the label style from inline-block to inline, this way it won't break when the solution takes more than one line:

Edited CodePen

label{
  display: inline;
}  

Hope it helps!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.