How to align input forms in HTML and CSS?

Spread the love

Sometimes, we want to align input forms in HTML and CSS.

In this aricle, we’ll look at how to align input forms in HTML and CSS.

How to align input forms in HTML and CSS?

To align input forms in HTML and CSS, we can use a table layout.

For instance, we write

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text" />
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text" />
  </p>
</form>

to add a form.

Then we write

form {
  display: table;
}
p {
  display: table-row;
}
label {
  display: table-cell;
}
input {
  display: table-cell;
}

to make the form display in a table layout with display: table;.

Then we display the p elements as table rows with display: table-row;.

And we display the label and input elements as table cells with display: table-cell;.

Conclusion

To align input forms in HTML and CSS, we can use a table layout.

Leave a Reply

Your email address will not be published. Required fields are marked *