css 两个input并排

CSS是前端开发中非常重要的一部分，它可以控制网页的样式、布局和交互效果。今天我们要介绍的是如何使用CSS将两个input并排显示。

div class="input-wrapper">
      input type="text" placeholder="请输入用户名">
      input type="password" placeholder="请输入密码">
    /div>
.input-wrapper {
      display: flex;
      flex-direction: row;
}
.input-wrapper input {
      width: 50%;
      padding: 10px;
      margin-right: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
}
    

首先，我们使用了一个div来包含这两个input。在CSS中，我们使用了flex布局，将两个input以row（行）方向排列在一起。这样，它们就可以并排显示了。

接下来，我们对input进行了一些样式设置。它们各占50%的宽度，padding和border-radius用来调整样式。同时，我们添加了一个1像素的边框，使其在视觉上更加美观。

使用以上代码，我们可以快速轻松地实现两个input并排的效果。这对于一些登录、注册等场景非常实用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！