HTML表单元素水平对齐实现 输入框、下拉框、文件按钮对齐方法

实现表单控件对齐的修改方案 #

你当前的代码主要存在CSS语法错误、控件宽度不统一、行布局规则不统一的问题，修改后可实现所有输入类控件对齐，以下是完整可运行代码：

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* 背景图设置 */
  background-image: url("logo.jpg");
  height: 50%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 表单通用样式 */
.form-row {
  display: flex;
  width: 70%;
  margin: 0 auto 20px auto;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.form-row label {
  width: 40%;
  text-align: right;
  margin: 0;
}
/* 统一所有输入类控件宽度 */
input[type="text"], select, input[type="file"] {
  width: 200px;
  box-sizing: border-box;
  padding: 2px 4px;
}
/* GDPR选框行单独调整 */
.gdpr-row {
  justify-content: center;
  gap: 8px;
}
.gdpr-row label {
  width: auto;
  text-align: left;
}
</style>
</head>
<body>
<!-- 表单区域 -->
<div class="w3-green" id="form_section">
  <div class="w3-container w3-content w3-padding-64" style="max-width:800px">
    <h2 class="w3-wide" align="Center"><strong>Přihláška</strong></h2>
    <form action="mail_handler.php" method="post">
      <div class="form-row">
        <label for="fname">Jmeno:</label>
        <input type="text" id="fname" name="fname" value="">
      </div>
      <div class="form-row">
        <label for="lname">Příjmení:</label>
        <input type="text" id="lname" name="lname" value="">
      </div>
      <div class="form-row">
        <label for="prace_something">Odkaz na bakalářskou práci:</label>
        <input type="text" id="prace_something" name="prace_something" value="">
      </div>
      <div class="form-row">
        <label for="vysoho">Vysoká škola:</label>
        <input type="text" id="vysoho" name="vysoho_skola" value="">
      </div>
      <div class="form-row">
        <label for="obor">Studijní obor:</label>
        <input type="text" id="obor" name="obor" value="">
      </div>
      <div class="form-row">
        <label for="kategorie">Kategorie v soutěži:</label>
        <select id="kategorie" name="items">
          <option value="science">Science</option>
          <option value="technology">Technology</option>
          <option value="engineering">Engineering</option>
          <option value="mathematics">Mathematics</option>
        </select>
      </div>
      <div class="form-row">
        <label for="myfile">Bakalářská práce:</label>
        <input type="file" id="myfile" name="myfile" multiple>
      </div>
      <div class="form-row gdpr-row">
        <input type="checkbox" id="gdpr" name="gdpr" value="">
        <label for="gdpr"> I agree with GDPR for SWE and Honeywell</label>
      </div>
      <div class="form-row">
        <input type="submit" name="submit" value="Poslat">
      </div>
    </form>
  </div>
</div>
</body>
</html>

核心改动说明

• 修复了原代码中.bg样式缺少闭合大括号的语法错误，避免后续样式失效
• 所有表单项都用统一的form-row容器包裹，使用flex布局控制对齐逻辑，取消了原代码中冗余的<br>换行标签
• 统一了文本输入框、下拉框、文件选择框的宽度，通过box-sizing: border-box保证边框内边距不撑开宽度
• 调整label为固定宽度右对齐，和输入控件之间留固定间距，整体表单行居中显示
• 单独适配了GDPR勾选框行的布局，避免和普通输入行的规则冲突

你当前的初始表单效果参考：

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