如何用HTML和CSS实现表单输入项水平均匀分布的闪卡系统布局？

当然可以实现你想要的布局。核心是通过Flexbox控制元素排列方向：将表单整体设置为垂直排列，同时把两个输入框放在独立容器中设置为水平排列，就能达成标签在上、输入框并排、按钮在下的效果。

修改后的HTML代码 #

<div class="view_new_flashcard">
  <form method="POST" action="<?php echo newcard($conn); ?>">
    <input type="hidden" name="PostID" value="<?php echo $PostID; ?>">
    <input type="hidden" name="MatchUserID" value="<?php echo $UserID; ?>">
    
    <label>Enter New Card Information</label>
    
    <div class="input-group">
      <input type="text" name="FrontSide" placeholder="Front of Card">
      <input type="text" name="BackSide" placeholder="Back of Card">
    </div>
    
    <button type="submit" name="addcard">Add New Card</button>
  </form>
</div>

修改后的CSS代码 #

.view_new_flashcard {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}

.view_new_flashcard form {
  width: 100%;
  max-width: 800px; /* 限制表单最大宽度，避免大屏下过度拉伸 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 用gap替代<br>控制元素间距，布局更灵活 */
  align-items: center;
}

.view_new_flashcard .input-group {
  display: flex;
  gap: 1rem; /* 两个输入框之间的间距 */
  width: 100%;
}

.view_new_flashcard input[type="text"] {
  flex: 1; /* 让两个输入框平分容器宽度 */
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 0.8rem; /* 增加内边距提升输入体验 */
}

.view_new_flashcard button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

关键布局说明 #

1. 表单垂直排列：给form设置display: flex; flex-direction: column;，让标签、输入组、按钮从上到下垂直分布，gap属性能更精准地控制元素间的间距。
2. 输入框并排：将两个文本输入框放入.input-group容器，设置容器为display: flex;，并给输入框添加flex:1，让它们自动平分容器宽度，同时用gap设置输入框之间的间隔。
3. 居中适配：给form设置align-items: center;让内容水平居中，同时限制表单最大宽度，保证在不同屏幕尺寸下的显示效果。

内容的提问来源于stack exchange，提问作者adamcapjones