Can't figure this out. Terribly sorry to ask such a question :

HTML-CSS
1

Hello,

I’m coding the survey form.
And I get stuck with the input-fields…

I created an empty page, to play around.
Trying to figure it out.
I looked at other projects already.
But still, I can’t seem to find what’s going on…

I can’t seem to figure out how to place the text and inputfield of ‘Number’ aligned with ‘Name’ and ‘Email’.

Could someone point me out what I’m doing wrong?

The html :

<div id="main">
  
<div id="left">
   <div class="labels">
<label for="name">Name</label>
   </div>
  <div class="input-field">
<input type="name" id="name" required placeholder=" Enter your name">
  </div>
</div>
  
<div id="left">
    <div class="labels">
<label for="email">Email</label>
  </div>
 <div class="input-field">
<input type="email" id="email" required placeholder=" Enter your email">
</div>
  </div>

<div id="left">
    <div class="labels">
<label for="number">Your age</label>
    </div>
   <div class="input-field">
<input type="number" name="number" id="number" min="1" max="125" required placeholder="Enter your age">
  </div>
</div>

CSS :

#main {
  text-align:center
}

#name {
  width:250px;
  margin-left:25px;
  margin-bottom:5px;
  display:inline-block;
}

#email {
  width:250px;
  margin-left:25px;
  margin-bottom:5px;
  display:inline-block;
}

#number {
  width:250px;
  margin-left:25px;
  margin-bottom:5px;
  display:inline-block;
}

.input-field {
  text-align:left;
  display: inline-block;
  width:250px;
}

.labels {
  display:inline-block;
  text-align:left;
  width:auto 0;
  vertical-align:left;
  margin-top:3px;
 }
``
2

hi could you also give us the link with codepen? it be easier to see and help out :3

3

Of course, sorry I didn’t post it immediately!

https://codepen.io/Bulbusaur/pen/gOYjXmZ

4

Hi, you can replace .lebles 's width into a fixed value,for example 2em.

5

There are many ways to do the alignment, my recommendation is, don’t.

I know that’s how the example project looks, but most forms have the labels on top of the input. It is not only easier to make, but user tests have shown that your eyes can scan the form quicker. So it is actually considered better UX to have the labels on top.

In any case, here is one way of doing it using Grid.

<form action="">
  <div class="personal-info">
    <label for="name">Name</label>
    <input type="name" id="name" required placeholder=" Enter your name">

    <label for="email">Email</label>
    <input type="email" id="email" required placeholder=" Enter your email">

    <label for="number">Your age</label>
    <input type="number" name="number" id="number" min="1" max="125" required placeholder="Enter your age">
  </div>
</form>

.personal-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 20px 10px;
  align-items: center;
  max-width: 420px;
  margin: auto;
}

.personal-info > input {
  padding: 10px;
}

.personal-info > label {
/* if you want to right align the labels   */
/*   justify-self: end; */
}
7

Pretty sure the OP is just asking for help with aligning the labels and inputs.

9

@ShawnaZhou Thanks mate!

@lasjorg Thanks mate, looks much better idd!
I love the fact that you pointed out why you don’t recommend doing alignment and referring to the Google AI Blog article! Much appreciated!
I’ll being using Grid in the future.

Again, thanks to the both of you!

At KittyKora I can’t see what you’ve posted. (post withdrawn by autor, (…) unless flagged)
Nonetheless, thank you for taking the time to reply!