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;
}

演示