[分享]css两个form在同一行

发布于 2024-11-11 19:07:38

CSS技术可以帮助我们实现多种不同的页面布局，包括将两个form表单放在同一行。

<!DOCTYPE html>
<html>
<head>
  <style>
    .form-wrapper {
      display: flex;
    }
    .form-container {
      margin-right: 10px;
    }
    .form-container form {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="form-wrapper">
    <div class="form-container">
      <form action="#">
        <label>姓名:</label>
        <input type="text">
        <button>提交</button>
      </form>
    </div>
    <div class="form-container">
      <form action="#">
        <label>电话:</label>
        <input type="text">
        <button>提交</button>
      </form>
    </div>
  </div>
</body>
</html>

代码中，我们通过设置form-wrapper为flex布局，让两个form表单在同一行内显示。然后通过form-container的margin-right属性，给两个form表单之间添加了一定的间距。最后，对form元素也设置为flex布局，让其中的输入框和按钮按一定比例自适应调整布局。

css 教程