Learn Accessibility by Building a Quiz -- Step 57

" To align the input boxes with each other, create a new ruleset that targets all input and label elements within an .info element and set the display property to inline-block."

Can someone explain why setting the inputs and labels to display: inline-block aligns them to the right? I never would have guessed this as the solution because it doesn’t seem to make sense looking at the specification for what this property does.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

By default, input and label elements are rendered as block-level elements, which means they occupy the entire width of their parent container and appear on separate lines. However, setting the display property to inline-block changes this behavior.

When an element is set to display: inline-block, it behaves like an inline element in that it can appear on the same line as other inline elements.By setting the inputs and labels within the .info element to display: inline-block, they will be treated as inline-level block containers, allowing them to appear next to each other horizontally. This results in the alignment of the input boxes with each other.

What do you mean inline-level block “containers”? And where does the right-justification come from?

I think I understand now. The input and label elements have their width attribute set, and setting their display to inline-block activates these settings which previously had no effect. The right justification of the label elements comes from the text-align: right.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.