Aan Aan - 16 days ago 5
CSS Question

Trying to align input field with labels

I want to align the input fields shown below, with keep using

<label>
in a correct way.

enter image description here

The code is as below:

<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>


I am thinking to separate
<label>
tags in a
<div>
and the input fields in another and then with some floating manipulation I make the intended alignment, is this a correct way?

Answer

How about this

form > label {
  min-width: 185px;
  display: inline-block;
}
<form action="add.php" method="POST" enctype="multipart/form-data">
  <label for="refNo">Field1 name (long)</label>
  <input id="refNo" type="text" name="refNo" value="" /><br>
  <label for="name">Field2 name</label>
  <input id="name" type="text" name="name" value="" /><br>    
  <input type="submit" value=":: Add  ::" name="addBtn" />
</form>