如何在HTML中对齐输入表单

一尘不染

如何在HTML中对齐输入表单

html

我是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的基本知识。

阅读 1193

2020-05-10

共1个答案

一尘不染

另一个使用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>

2020-05-10