CSS - inputs are not aligned

Question

CSS - inputs are not aligned

Navigation

#1 by (0 votes)

0

I have the following code:

<span class="input-label">New Password:</span>
<input id="password" type="password" name='password' placeholder="Insert new password">
<br> <span class="input-label">Confirm New Password:</span>
<input id="cpassword" type="password" placeholder="Confirm new password" name="confirmpassword" autocomplete="new-password">
<br>
<input type="submit" name="submit_password">

I thought that using labels would align inputs , but that's not what happens, as the image below shows.

html css

asked by anonymous 28.05.2017 / 12:08

1 answer

Create transform view by deleting or transforming DATE into VARCHAR in ORACLE How to escape a recursive process of saving error log of a database - PHP?

score 0 · Accepted Answer

Hello, Diana! There are several ways to do this, I'll show you one.

The span tag, by default, comes with display: inline; , which will not work with the width property that I will use for one of the possible workarounds for your problem. Here is the code CSS , which sets a fixed value for width and also changes its display to inline-block , and finally aligns the text to the right.

.input-label {
  display: inline-block;
  text-align: right;
  width: 180px;
}

You can see the code working here . You can find more information about display here and here

Obs * In HTML5 we have a variety of semantically-qualified elements for each structure type of a page.html, for example, instead of using span to define the label, you can use the tag itself <label></label> .