[分享]css两个输入框并排显示

今天我们要来学习如何使用CSS实现两个输入框并排显示。这对于需要同时输入两种信息的表单来说非常实用。 首先，我们需要将两个输入框放在一个容器内，以便于进行后续的排列操作。我们可以使用元素作为容器...

今天我们要来学习如何使用CSS实现两个输入框并排显示。这对于需要同时输入两种信息的表单来说非常实用。

<div class="container">
  <input type="text" class="input1">
  <input type="text" class="input2">
</div> 

首先，我们需要将两个输入框放在一个容器内，以便于进行后续的排列操作。我们可以使用<div>元素作为容器，然后在容器内添加两个<input>元素，分别定义不同的类名。

.container {
  display: flex;
}

.input1,
.input2 {
  flex: 1;
  margin-right: 10px;
} 

接下来，我们可以使用CSS中的flex布局来实现两个输入框的并排显示。通过给容器设置display:flex属性，我们可以让容器中的元素按照水平方向排列。然后我们通过给.input1和.input2元素都设置flex:1属性来让它们占据等分的宽度。为了让两个输入框之间有一定的距离，我们也可以为.input1元素设置margin-right:10px属性。

最后，当我们将以上的代码应用到页面中时，就可以看到两个输入框已经成功地并排显示了。