右对齐时浅灰色输入框无法横向拉伸的技术求助

我的浅灰色输入框设置右对齐后，无法实现从左到右的横向拉伸效果，以下是用到的CSS和HTML代码：

原CSS代码 #

form {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: minmax(200px, 1fr);
  gap: 0.75rem;
  width: 100%;
}

input,
textarea {
  font-size: 1rem;
  padding: 10px;
  color: #666666;
  background-color: #fafafa;
  border: none;
}

input:focus,
textarea:focus {
  outline: none;
  background-color: #f0f0f0;
}

label {
  padding: 10px;
  text-align: right;
}

原HTML代码 #

*First Name: <input type="text" name="myFName" id="myFName" required><br>
<label for="myFName"></label> *Last Name: <input type="text" name="myLName" id="myLName" required><br>
<label for="myLName"></label> *E-mail: <input type="email" name="myEmail" id="myEmail" required><br>
<label for="myEmail"></label> Phone information: <input type="tel" name="myPhone" id="myPhone"><br>
<label for="myPhone"></label> Graduation Date: <input type="date" id="myGraduation" name="myGraduation"><br>
<label for="myGraduation"></label> *Comments: <textarea id="myComments" name="myComments" rows="2" cols="20" required</textarea><br>
<label for="myComments"></label>
<input type="submit" name="submit" id="mySubmit" value="Submit">
<label for="mySubmit"></label>

当前效果 #

输入框仅占据自身内容宽度，无法填满表单容器的横向空间，标签与输入框排版混乱，未形成整齐的两列布局。

期望效果 #

标签右对齐，输入框横向拉伸填满剩余空间，整体呈现整齐的两列表单布局，提交按钮右对齐。

解决方案 #

1. 修正HTML结构 #

原HTML标签与输入框对应关系错误，重构为语义化的表单组结构：

<form>
  <div class="form-group">
    <label for="myFName">*First Name:</label>
    <input type="text" name="myFName" id="myFName" required>
  </div>
  <div class="form-group">
    <label for="myLName">*Last Name:</label>
    <input type="text" name="myLName" id="myLName" required>
  </div>
  <div class="form-group">
    <label for="myEmail">*E-mail:</label>
    <input type="email" name="myEmail" id="myEmail" required>
  </div>
  <div class="form-group">
    <label for="myPhone">Phone information:</label>
    <input type="tel" name="myPhone" id="myPhone">
  </div>
  <div class="form-group">
    <label for="myGraduation">Graduation Date:</label>
    <input type="date" id="myGraduation" name="myGraduation">
  </div>
  <div class="form-group">
    <label for="myComments">*Comments:</label>
    <textarea id="myComments" name="myComments" rows="2" required></textarea>
  </div>
  <div class="form-group">
    <input type="submit" name="submit" id="mySubmit" value="Submit">
  </div>
</form>

2. 调整CSS网格布局 #

修改网格为两列布局，确保输入框拉伸填满空间：

form {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr); /* 标签列自适应，输入框列拉伸 */
  gap: 0.75rem;
  width: 100%;
  align-items: center; /* 垂直居中对齐 */
}

/* 提交按钮跨两列并右对齐 */
.form-group:last-child {
  grid-column: 1 / -1;
  justify-self: flex-end;
}

input,
textarea {
  font-size: 1rem;
  padding: 10px;
  color: #666666;
  background-color: #fafafa;
  border: none;
  width: 100%; /* 输入框填满所在列宽 */
  box-sizing: border-box; /* 内边距不额外增加宽度 */
}

input:focus,
textarea:focus {
  outline: none;
  background-color: #f0f0f0;
}

label {
  padding: 10px;
  text-align: right;
}

核心要点 #

• 网格两列布局：auto列适配标签宽度，minmax(200px,1fr)保证输入框最小宽度且拉伸剩余空间
• 输入框设置width:100%和box-sizing:border-box，确保填满列宽且内边距不影响布局
• 重构HTML结构，让标签与输入框正确绑定，提升语义化和可维护性

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