如何在 HTML 中对齐输入表单

发布于11月30日

我是HTML的新手，我正在努力学习如何使用表单.

到目前为止，我遇到的最大问题是对齐表单.以下是我当前HTML文件的示例:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

问题是，"邮箱"之后的字段框与名字和姓氏相比，在间距上有很大的不同.什么才是"合适"的方式，才能让他们在本质上"排成一队"呢？

我正在努力练习好的形式和语法...很多人可能会用CSS来做这件事.我不确定，到目前为止，我只学到了HTML的基本知识.

推荐答案

另一个例子是使用CSS，我只需将表单放在带有容器类的div中.并指定包含在其中的输入元素为容器宽度的100%，并且两边都没有任何元素.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>