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来在第一个输入框的右侧留出一些空间。
通过这些最终的结果,两个输入框的大小会自动保持一致,而且它们的间距也会有一个小的空隙。
粉丝
0
关注
0
收藏
0