html & CSS - align inputs

Question

html & CSS - align inputs

Navigation

#1 by (0 votes)

0

I have the following code in HTML:

First Name:<input type="text"  placeholder="First name" name="first_name" required> <br>
Last Name:<input type="text" name="last_name"  placeholder="Last Name" required> <br>
Account Number:<input type="text" name="number"  placeholder="account number" onkeypress="return justNumber(event)" required> <br>
Security Number:<input type="text" name="security_number"  placeholder="security number" onkeypress="return justNumber(event)" required>

I tried to align using text-align:center; and it did not work - see the photo here: link

html css

asked by anonymous 01.05.2017 / 19:45

1 answer

Zebra pattern in libreoffice Error requesting internal CakePHP pages?

score 0 · Accepted Answer

Possible solution:

.form-container span.input-label{
  display: inline-block;
  width: 120px; /* width a ajustar */
  text-align: right;
  padding-right: 10px;
}

<div class="form-container">
  <span class="input-label">First Name:</span><input type="text"  placeholder="First name" name="first_name" required> <br>
  <span class="input-label">Last Name:</span><input type="text" name="last_name"  placeholder="Last Name" required> <br>
  <span class="input-label">Account Number:</span><input type="text" name="number"  placeholder="account number" onkeypress="return justNumber(event)" required> <br>
  <span class="input-label">Security Number:</span><input type="text" name="security_number"  placeholder="security number" onkeypress="return justNumber(event)" required>
</div>