html - 使用 CSS 控制表单的布局

Question

我是 CSS 的新手，请多多包涵!我有以下表格:

我想控制输入文本字段的宽度(即增加它们以允许更长的名称)。如果我使用下面的 CSS，我可以达到这个效果。

input {
    width: 342px;
}

但是它也增加了按钮和复选框的宽度以提供以下内容:

如何分别控制每个输入的长度(将来可能会分别控制每个文本框)？我是否必须为每个分配一个类并分别控制它们？

Answer 1

您可以指定几个类来管理表单字段的宽度/高度，并根据需要应用。我个人认为现在将输入设置为 100% 宽度并使用包装容器来调整它们的宽度是很常见的(不是必需的)做法。当您使用网格系统并且希望事物更紧密地对齐时，这很有意义。

input[type="text"],
input[type="submit"],
select,
textarea {
  box-sizing: border-box;
  width: 100%;
}

您可以尝试针对特定输入，而不是将元素包装在容器中，或者为每个元素分配宽度类，如下所示:

input[type="text"] {}
input[type="submit"] {}
select {}
textarea {}