Need helps! how to put input and label on the same line using flex for survey form!

[sulsoyy]

I am currently working on the survey form page and I am facing difficulty with aligning the input and label elements on the same line using flex.

Here’s my HTML structure

<div class="survey-group">
                        <p>How would you rate our hotel servcies? (Choose between 1 - 5 where 1 is very unsatisfied and 5 is very satisfied?)</p>
                        <div class="radio-group">
                            <input id="one" type="radio" name="rating" value="1" class="input-radio-rating">
                            <label id="one-label" for="one">1</label>
                            <input id="two" type="radio" name="rating" value="2" class="input-radio-rating">
                            <label id="two-label" for="two">2</label>
                            <input id="three" type="radio" name="rating" value="3" class="input-radio-rating">
                            <label id="three-label" for="three">3</label>
                            <input id="four" type="radio" name="rating" value="4" class="input-radio-rating">
                            <label id="four-label" for="four">4</label>
                            <input id="five" type="radio" name="rating" value="5" class="input-radio-rating">
                            <label id="five-label" for="five">5</label>
                        </div>
                    </div>

Here’s my Code:

.survey-group {
    display: flex;
    flex-direction: column;
}


.input-radio-rating {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

Please, help me with this! I want radio checkbox and label to be on the same line. If there is alternative way other than using flex, please let me know! Thanks

[ILM]

if you want all on the same line you need to change the flex direction to row
you can also add the radio buttons inside the labels

[sulsoyy]

I tried the flex-direction=row but it didn’t work

<div class="radio-group">
                            <label id="one-label" for="one"><input id="one" type="radio" name="rating" value="1" class="input-radio-rating">
                            1</label>
                            <label id="two-label" for="two"><input id="two" type="radio" name="rating" value="2" class="input-radio-rating">
                            2</label>
                            <label id="three-label" for="three"><input id="three" type="radio" name="rating" value="3" class="input-radio-rating">
                            3</label>
                            <label id="four-label" for="four"><input id="four" type="radio" name="rating" value="4" class="input-radio-rating">
                            4</label>
                            <label id="five-label" for="five"><input id="five" type="radio" name="rating" value="5" class="input-radio-rating">
                            5</label>
                        </div>

.radio-group {
    display: flex;
    flex-direction: row;
}

It will put all the radio buttons on the same line. I want each corresponding radio button and label to be align on the same lines but not all element in radio-group div.

[Adelinked]

Hi, what you can do is to put both the label and the radio in the same new container (a div) with flex row.

<div class="group">
       <label id="one-label" for="one">1</label>
       <input id="one" type="radio" name="rating" value="1" class="input-radio-rating">
   </div>

<style>
    .group {
        display: flex;
        flex-direction: row;
    }
</style>

[LucLH]

Hi @sulsoyy,

In using Flexbox with the HTML you have, you will arrive this result, that it be column or row. In your div container, you have a list of inline tags, so if you tell them to be column or row, they will be one after another. What propose @Adelinked is an idea, you could also just delete the following CSS rule for example and add br to the HTML after each label:

<input id="one" type="radio" name="rating" value="1" class="input-radio-rating">
<label id="one-label" for="one">1</label><br />
<input id="two" type="radio" name="rating" value="2" class="input-radio-rating">
<label id="two-label" for="two">2</label><br />

There are many ways to do, the important is that you understand why you have this result with your code. Hope it helps!

[sulsoyy]

Thank you guys for your help!

I figure out that by putting nesting the input element into the label tag it fixed my problem!

<label id="one-label" for="one"><input id="one" type="radio" name="rating" value="1" class="input-radio-rating">
                            1</label>
                            <label id="two-label" for="two"><input id="two" type="radio" name="rating" value="2" class="input-radio-rating">
                            2</label>

This method is a lot more useful than previous one because if users can select a box clicking label as well!

Here is the link to my final project feel free to leave comments!

Please give feedback for my survey form!

Here is the link to the codepen: I made a survey for hotel review! Any comments regarding to design, structure of information or even html and css are high appreciative! Thanks! Let’s go

[sulsoyy]

Thank you!
I tried it again second time and it worked!

I am surprised that I didn’t know that putting input inside the label tags can easily solve the problem!