[分享]css两个文本框并列

CSS是网页设计中不可或缺的一部分，能够带来多种多样的效果。其中，对于文本框的设计，CSS也能发挥重要作用。下面，我们来介绍如何通过CSS实现两个文本框并列。HTML代码如下： CSS代码如下...

CSS是网页设计中不可或缺的一部分，能够带来多种多样的效果。其中，对于文本框的设计，CSS也能发挥重要作用。下面，我们来介绍如何通过CSS实现两个文本框并列。

HTML代码如下：

<div class="text-box">
  <input type="text" placeholder="文本框1">
  <input type="text" placeholder="文本框2">
</div>

CSS代码如下：

.text-box {
  display: flex; /*将子元素变为块级元素*/
  justify-content: space-between; /*两边对齐*/
}
.text-box input[type="text"] {
  width: 45%; /*设置宽度*/
  margin: 0; /*去除默认边距*/
}

首先，我们用div标签将两个input标签包裹起来。然后，给这个div标签添加class属性“text-box”。

在CSS样式里，我们将这个“text-box”通过display:flex属性，将其中的子元素input变为块级元素，并且让它们在水平方向（即主轴）上两端对齐。这就实现了两个文本框的并列。接着，我们通过设置input标签的宽度为45%，使它们能够并排在一起，同时去除了默认的margin边距。

至此，我们就成功地使用CSS实现了两个文本框并列的效果。通过这种方法，我们可以更好地布局网站，并让用户更好地使用。