Please review my project: Build a Survey Form

Please review my project: Build a Survey Form.

Sorry, I forgot to attach the link with the project.

Please change the thread title so people know what this is about.

Edit: I updated your thread title.


I would suggest you put the label and input elements for the checkbox and radio inputs on the same line. One simple option is to put the input elements inside the labels and set the label to be display: flex. Then you can also vertically align them using align-items: center.

lasjorg,
Thanks for your suggestions. I tried. I also searched on google and found something similar. Unfortunately I was not able to align the elements horizontally.

However, I tried further with another solution

label,input{
    display: inline-block;
    vertical-align: middle;
}

and I got a horizontal alignment.

Right but now all the elements are on one line.

I just meant each input and associated label text should be on the same line. But still have each group of labels/inputs stacked on their own line.

Example
<fieldset id="radio-button">
  <legend>Please select your gender:</legend>
  <label for="male">
    <input type="radio" id="male" name="gender" value="male"> Male
  </label>
    <label for="female">
    <input type="radio" id="female" name="gender" value="female"> Female
  </label>
    <label for="other">
    <input type="radio" id="other" name="gender" value="other"> Other
  </label>
</fieldset>
label {
  display: flex;
  align-items: center;
}

input {
  margin: 0 0.4rem 0 0;
}
1 Like

I will try, thanq you very much

Wevsite Survey renewed
I hope I understood the suggestions now.
If so, do I need to save the CodePen link again in " I’ve completed this challenge "?

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