[分享]css两个input大小一样

CSS可以很方便地使两个输入框的大小一样。这非常适用于需要让用户输入相同长度的信息的表单，例如用户名和密码。input { width: 50; padding: 10px; boxsizing: b...

CSS可以很方便地使两个输入框的大小一样。这非常适用于需要让用户输入相同长度的信息的表单，例如用户名和密码。

input {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.input-group {
  display: flex;
  justify-content: space-between;
}

.input-group input:first-of-type {
  margin-right: 10px;
} 

在上面的代码中，我们首先设置了所有输入框的宽度为50%。我们还通过设置box-sizing为border-box来确保输入框的总宽度包括padding和border，而不是只包括content部分。

接下来，我们将两个输入框包裹在一个class为“input-group”的div中，并使用flex布局。我们使用justify-content: space-between来将两个输入框推向每个容器的两个极端，并使用margin-right来在第一个输入框的右侧留出一些空间。

通过这些最终的结果，两个输入框的大小会自动保持一致，而且它们的间距也会有一个小的空隙。