使用

元素

最简单的方法是使用

<div class="container">
  <h2 class="title">标题</h2>
  <!-- 表单字段 -->
</div>

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.title {
  margin-top: 0;
  font-size: 18px;
  font-weight: bold;
}

这里通过CSS样式设置了容器的边框和内边距，并且添加了一个标题。你可以根据自己的需要来调整CSS样式。

使用表格

另一个方法是使用表格来作为容器，这种方法虽然有些奇怪，但是也可以实现类似于

<table class="container">
  <caption class="title">标题</caption>
  <tbody>
    <!-- 表单字段 -->
  </tbody>
</table>

.container {
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

这里使用了表格元素作为容器，并且使用CSS来设置表格的样式。

使用flex布局

最后一个方法是使用CSS flex布局，它可以让我们更加灵活地布局表单字段，并且可以设置类似于

<section class="container">
  <h2 class="title">标题</h2>
  <div class="content">
    <!-- 表单字段 -->
  </div>
</section>

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

这里使用了一个

以上就是三种实现类似于