Survey Form: Aligning Input Boxes

HTML-CSS
1

My first 4 input boxes are not lined up together even though the labels are lined up with each other. How do I get the input boxes to line up perfectly?

2

If you have not solved it yet, provide a link of your project like codepen so we could help you.

4
5

So each input box starts at the same place on the vertical axis. If you were to draw a vertical line across the start of each input box, it would cover each of the starting edges equally. Much like how the the text is doing in this link https://codepen.io/greevesh/pen/ajJeKr

6

First of all, do not style using id’s, instead use .class so that you can duplicate it.

Now wrap the <label> and <input> with a <div>

<div class="outer">
    <div>
       LABEL
    </div>
    <div>
       INPUT
    </div>
</div>

Do the above for each label and its corresponding input’s

Give .outer a full 100% width and give label and input 50% width

NOTE: Use class names not Id’s

1 Like
7

I tried it --> https://codepen.io/Mike-was-here123/pen/oMqoqO

I used ID’s since they were required by the challenge, and creating classes i wouldn’t use more then once would be a waste.

8

Yes the challenge requires Id’s but that doesn’t mean classes are waste adding for only one use…Because you may want to develop you site further so you may end up creating similar forms, at that situations all you have to do is just copy the class which you have previously created, it reduces the code and makes content lighter

In your codepen you have to add class or id for the <div></div> inside the .outer

9

can you show me what this looks like with the classes and everything?

10

Are you sure you want a raw solution straight away.? That won’t take into learning… Let’s do this way you try it what you feel and we will correct it if its wrong…

11

text-align: center; applied to to body solves some problems …

12

I think i replied on the wrong post, here is mine --> Aligning elements w/ flexbox