求助：如何在HTML中制作元素独立分隔且对齐的表单？

下面提供两种常用的CSS布局方案，能快速实现表单元素整齐对齐，同时保持各元素独立分隔：

方法1：CSS Grid布局（推荐） #

这种布局能让标签和输入框自动按列对齐，结构简洁易维护。

HTML代码 #

<form class="aligned-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="email">邮箱地址</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-group">
    <label for="phone">联系电话</label>
    <input type="tel" id="phone" name="phone">
  </div>
  <div class="form-group">
    <label for="message">留言内容</label>
    <textarea id="message" name="message" rows="4"></textarea>
  </div>
</form>

CSS代码 #

.aligned-form {
  display: grid;
  grid-template-columns: 120px 1fr; /* 标签列固定宽度，输入列自适应剩余空间 */
  gap: 12px 8px; /* 控制行、列间距 */
  align-items: center; /* 让元素垂直居中对齐 */
  max-width: 500px;
  padding: 20px;
}

.form-group {
  display: contents; /* 让子元素直接参与Grid布局，避免额外层级干扰 */
}

label {
  text-align: right; /* 标签右对齐，视觉更整齐 */
  padding-right: 8px;
}

textarea {
  resize: vertical; /* 允许用户垂直调整文本框高度 */
}

方法2：Flexbox布局 #

如果习惯用Flex布局，也可以通过固定标签宽度实现对齐：

CSS代码（HTML结构同上） #

.aligned-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
  padding: 20px;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

label {
  flex: 0 0 120px; /* 固定标签宽度，不收缩不扩展 */
  text-align: right;
}

input, textarea {
  flex: 1; /* 输入框占满剩余空间 */
}

你可以根据实际需求调整120px的标签宽度、间距数值，或者修改对齐方式，就能匹配参考图的样式。

内容的提问来源于stack exchange，提问作者totally-google-drive