如何在两行中对齐输入框

要在两行中对齐输入框，可以使用CSS Flexbox布局来实现。以下是一个简单的示例：

HTML部分

<div class="container">
  <div class="input-group">
    <label for="input1">输入框1:</label>
    <input type="text" id="input1">
  </div>
  <div class="input-group">
    <label for="input2">输入框2:</label>
    <input type="text" id="input2">
  </div>
</div>

CSS部分

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  margin-right: 10px;
}

解释

1. 容器（.container）:
   • 使用 display: flex 将容器设置为Flexbox布局。
   • flex-direction: column 使子元素垂直排列。
   • align-items: flex-start 确保子元素在容器的起始位置对齐。

• 输入组（.input-group）:
  • 使用 display: flex 将每个输入组设置为Flexbox布局。
  • align-items: center 确保标签和输入框在同一行内垂直居中对齐。
  • margin-bottom: 10px 添加一些间距，使每组输入框之间有一定的间隔。
• 标签（label）:
  • margin-right: 10px 添加一些间距，使标签和输入框之间有一定的间隔。

应用场景

这种布局方式适用于需要在表单中垂直排列多个输入框，并且希望每个输入框与其对应的标签在同一行内对齐的场景。

优势

• 简洁直观: 使用Flexbox布局可以轻松实现复杂的对齐需求。
• 响应式设计: Flexbox布局具有良好的响应性，可以适应不同屏幕尺寸。
• 易于维护: 代码结构清晰，便于后续维护和扩展。

通过这种方式，你可以轻松地在两行中对齐输入框，并且保持良好的视觉效果和用户体验。