How do you arrange text?

I’m working on my Survey Form. I cant get the text to appear the way I want it. I want the survey questions to appear in a list but instead they all run together like a paragraph. How can I adjust this? I’ve been trying using flexbox and/or grid but can’t figure it out!

https://codepen.io/StarlaNoel/pen/MMNBwj

try adding some margin.
If it still doesn’t work, use the <br> tag.

1 Like

<input> and <label> elements are inline elements, meaning that they do not force a new line and so they all appear on the same line, like sentences in a paragraph.

You can change their display to block (which means they will all appear on their own lines). Or you can wrap them in something like a <div> element, which is a block element.

I would wrap them in a <div> (especially since you can style that <div> which might be useful for positioning). But someone with more experience than me could give you better advice.

1 Like

Someone may offer more experienced advice but this makes more sense to me. Thank you so much!

1 Like

I figured it out! In case anyone else has the same question… I wrapped each question (which I wanted to start in a new line) in a < ul > tag. maybe this is a sloppy way to do it but it worked for me! Input welcome:) Thanks so much for the help!

Use a different block-level element as the container, otherwise the HTML will be invalid. The <label> <input> and <select> elements cannot be a child of the <ul> element (child must be a list item).

<ul> Permitted content

zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements.

You can just use a <div> instead.

1 Like

Oh geez. Here I thought I was so smart. Thank you for letting me know!!!