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.
