大学作业网站：JavaScript表单输入框对齐问题求助

嘿，我懂你现在卡在表单输入框对齐的问题上了——用float来做布局确实很容易搞出对齐混乱的状况，尤其是在做大学作业这种需要规整排版的表单时。咱们来调整一下你的代码，换用更靠谱的布局方式解决这个问题：

先说说问题所在 #

你当前用float: left/float: right加上固定padding-left: 200px的方式，很容易因为内容长度变化、屏幕尺寸改变而打乱对齐，而且用<table>的<th>来承载表单元素也不是最佳实践，table更适合展示表格数据，而非表单布局。

方案1：用Flexbox实现精准对齐（灵活易维护） #

Flexbox是现在做表单布局的首选，能轻松搞定垂直+水平对齐：

首先替换你的CSS类：

/* 表单行容器，用来包裹每一组标签和输入框 */
.form-row {
  display: flex;
  align-items: center; /* 让标签和输入框垂直居中对齐 */
  margin-bottom: 12px; /* 给每行表单留些间距 */
  width: 100%;
}

/* 标签样式：固定宽度，右对齐，确保所有标签对齐 */
.booking1 {
  width: 200px; /* 可根据需求调整宽度 */
  text-align: right;
  margin-right: 10px;
}

/* 输入框容器：占据剩余空间 */
.booking2 {
  flex: 1;
  padding-top: 0; /* 去掉原来的padding，避免错位 */
}

/* 统一输入框样式，避免尺寸不一 */
.booking2 input, .booking2 select {
  width: 100%;
  padding: 7px;
  box-sizing: border-box; /* 确保padding不会撑大输入框 */
}

然后修改HTML结构，去掉table，改用div组织表单：

<div class="form">
  <form method="post">
    <!-- 第一组表单 -->
    <div class="form-row">
      <label class="booking1">姓名：</label>
      <div class="booking2">
        <input type="text" name="username">
      </div>
    </div>
    <!-- 第二组表单 -->
    <div class="form-row">
      <label class="booking1">联系邮箱：</label>
      <div class="booking2">
        <input type="email" name="useremail">
      </div>
    </div>
    <!-- 更多表单组... -->
  </form>
</div>

方案2：用Grid布局（适合规整的两列表单） #

如果你的表单是严格的两列结构，Grid布局会更简洁：

CSS修改如下：

/* 表单容器直接用Grid */
.form {
  display: grid;
  grid-template-columns: 200px 1fr; /* 第一列固定宽，第二列自适应 */
  gap: 10px 12px; /* 行列之间的间距 */
  align-items: center;
}

.booking1 {
  text-align: right;
}

.booking2 input, .booking2 select {
  width: 100%;
  padding: 7px;
  box-sizing: border-box;
}

HTML结构可以更简洁，不用额外的行容器：

<div class="form">
  <form method="post">
    <label class="booking1">姓名：</label>
    <div class="booking2"><input type="text" name="username"></div>
    
    <label class="booking1">联系邮箱：</label>
    <div class="booking2"><input type="email" name="useremail"></div>
    
    <!-- 更多表单元素... -->
  </form>
</div>

这两种方法都比float布局可靠得多，不管内容长度怎么变、屏幕尺寸怎么调，输入框的对齐都会保持一致。另外记得把原来的table标签去掉哦，用适合布局的容器来组织表单~

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