如何在HTML和CSS中同时调整输入框大小并对齐表单元素？

解决方案：用CSS Flex/Grid实现标签对齐+自定义输入框尺寸 #

首先修正你HTML中的嵌套form标签问题（HTML规范不允许form嵌套），再通过CSS布局实现需求，无需依赖表格：

修改后的HTML结构

<div class="wrapper-wrapper">
  <div id="page-content-wrapper">
    <form action="" class="supplier-form">
      <div class="wrapper">
        <h1>Form Add Supplier</h1>
        <div class="form-group">
          <label for="first">First Name</label>
          <input type="text" id="first" name="first" class="small-input">
        </div>
        <div class="form-group">
          <label for="last">Last Name</label>
          <input type="text" id="last" name="last" class="small-input">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" id="email" name="email" class="medium-input">
        </div>
        <div class="form-group">
          <label for="address">Address</label>
          <input type="text" id="address" name="address" class="wide-input">
        </div>
        <div class="form-actions">
          <a href="/mastersupplier"><button type="button" class="btncancel">Cancel</button></a>
          <button type="submit" class="btnsubmit">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

对应CSS代码（Flexbox方案）

.supplier-form .wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* 核心：Flex布局实现标签对齐 */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px; /* 标签与输入框的间距 */
}

.form-group label {
  flex-basis: 120px; /* 固定标签宽度，实现统一对齐 */
  text-align: right;
}

.form-group input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 自定义不同输入框尺寸 */
.small-input {
  width: 150px;
}

.medium-input {
  width: 250px;
}

.wide-input {
  width: 350px;
}

/* 按钮区域对齐 */
.form-actions {
  margin-left: 130px; /* 与标签宽度+gap保持对齐 */
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.btncancel, .btnsubmit {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btncancel {
  background-color: #eee;
}

.btnsubmit {
  background-color: #007bff;
  color: #fff;
}

可选Grid布局方案（更简洁）

如果偏好Grid写法，可将.form-group的CSS替换为：

.form-group {
  display: grid;
  grid-template-columns: 120px 1fr; /* 第一列固定宽度，第二列自适应 */
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.form-group label {
  text-align: right;
}

关键说明 #

1. 移除嵌套form标签，符合HTML规范；
2. 通过固定标签宽度实现所有标题对齐；
3. 给输入框添加类名，单独控制每个输入框的尺寸；
4. 按钮区域通过margin-left对齐到输入框起始位置，保持布局一致性。

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