在网页开发中,经常需要在同一行显示多个输入框。下面介绍一种使用CSS实现的两个input并排的方法:
.input-wrapper {
display: flex;
align-items: center;
}
.input-wrapper input {
flex: 1;
margin-right: 20px;
} 代码解析:
首先,使用flex布局将两个input元素包裹起来,实现并排显示。
设置align-items为center使两个输入框在垂直方向居中对齐。
然后,给每个input元素设置flex: 1属性,使其平分容器的宽度。
最后,给第一个input元素设置margin-right: 20px属性,使两个输入框之间有一定的间隔。