如何在HTML中对齐输入表单

  • Z时代
  • 2024-01-10
  • 分类：问答

我是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>

以上是 如何在HTML中对齐输入表单 的全部内容， 来源链接： utcz.com/qa/433402.html

回到顶部