html - 入力ダイアログの並べ替え、HTML

Question

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname"><br>
    Email address: <input type="text" name="emailAddress">
</form>

入力フィールドを相互に整列するようにフォーマットするにはどうすればよいですか？

Answer 1

入力の対応するタイトルを<label>-sでラップすることができ、より意味的に意味があるという事実に加えて、すべてを希望どおりにスタイル設定できます。

HTML

<form>
    <label for="...">First name:</label> <input type="text" name="firstname"><br>
    <label for="...">Last name:</label> <input type="text" name="lastname"><br>
    <label for="...">Email address:</label> <input type="text" name="emailAddress">
</form>

CSS

label {
    display: inline-block;
    width: 100px;
}

デモ