css 两个input 水平

CSS中实现两个input 水平布局，可以采用以下几种方式：

1. 使用float属性

style>
.input-wrapper {
      width: 100%;
}
input {
      float: left;
      width: 50%;
      box-sizing: border-box;
}
    /style>
    div class="input-wrapper">
      input type="text" placeholder="Input 1">
      input type="text" placeholder="Input 2">
    /div>
    

2. 使用flex布局

style>
.input-wrapper {
      display: flex;
      justify-content: space-between;
}
input {
      width: 48%;
      box-sizing: border-box;
}
    /style>
    div class="input-wrapper">
      input type="text" placeholder="Input 1">
      input type="text" placeholder="Input 2">
    /div>
    

3. 使用grid布局

style>
.input-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 10px;
}
input {
      width: 100%;
      box-sizing: border-box;
}
    /style>
    div class="input-wrapper">
      input type="text" placeholder="Input 1">
      input type="text" placeholder="Input 2">
    /div>
    

以上就是实现两个input 水平布局的几种方式，开发者可以根据实际需求采用不同的方式。

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