css两个input大小一样

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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来在第一个输入框的右侧留出一些空间。

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

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个input大小一样

粉丝

0

关注

0

收藏

0

已有0次打赏