如何在HTML中对齐input元素？附代码示例求助

嘿，我来帮你搞定input元素对齐的问题～首先先修正下你HTML代码里的小问题，标签嵌套有点混乱（比如未闭合的<p>、<label>没和表单元素正确关联），先把代码理顺成更规范的结构：

<form>
  <div class="form-row">
    <label for="Usuari">USUARI:</label>
    <input type="text" id="Usuari" name="Usuari" size="20" maxlength="60"/>
  </div>
  <div class="form-row">
    <label for="Clau">CLAU:</label>
    <input type="text" id="Clau" name="Clau" size="20" maxlength="20" />
  </div>
  <div class="form-row">
    <input type="submit" name="submit" value="ACCÉS" />
  </div>
</form>

接下来给你几种实用的对齐方案，结合你的现有CSS来调整：

方案1：CSS Grid布局（推荐，简洁易维护） #

Grid布局能让表单元素的对齐变得非常直观，只需要给表单容器设置网格规则即可：

form {
  display: grid;
  grid-template-columns: 80px 1fr; /* 标签固定宽度，输入框占剩余空间 */
  gap: 10px; /* 行和列之间的间距 */
  align-items: center; /* 垂直居中对齐 */
}

/* 让提交按钮跨列对齐 */
.form-row:last-child {
  grid-column: 1 / -1;
}

/* 保留你原来的input样式 */
input {
  padding: 5px;
  font-weight: bold;
  font-size: 1em;
  color: #008040;
  background: #FFFFFF;
  border:1px dotted #004080;
}

label {
  font-weight: bold; /* 可选，让标签更醒目 */
}

方案2：Flex布局 #

用Flex布局给每一行设置水平排列，通过固定标签宽度来实现对齐：

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 行间距 */
}

label {
  width: 80px; /* 固定标签宽度 */
  font-weight: bold;
}

input {
  flex: 1; /* 输入框占剩余空间 */
  padding: 5px;
  font-weight: bold;
  font-size: 1em;
  color: #008040;
  background: #FFFFFF;
  border:1px dotted #004080;
}

/* 调整提交按钮的位置 */
.form-row:last-child {
  padding-left: 80px; /* 和标签宽度一致，对齐输入框 */
}

方案3：传统inline-block + 固定宽度（兼容旧浏览器） #

如果需要兼容一些老版本浏览器，可以用这种方法：

.form-row {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  vertical-align: middle; /* 垂直对齐 */
}

input {
  padding: 5px;
  font-weight: bold;
  font-size: 1em;
  color: #008040;
  background: #FFFFFF;
  border:1px dotted #004080;
  vertical-align: middle;
}

.form-row:last-child {
  padding-left: 84px; /* 标签宽度+少量间距，对齐输入框 */
}

这几种方案都能让你的input元素整齐对齐，你可以根据自己的需求选择～

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