如何在两个40%宽度的居中文本输入框两侧对齐标签

我来帮你搞定这个标签对齐的需求！你原来的代码里用了float来调整标签位置，但外层的text-align: center和float的特性冲突了，导致布局没达到预期效果。我给你换用更可靠的Flexbox布局来实现，既能让两个输入框各占40%宽度且整体居中，又能让左侧标签左对齐、右侧标签右对齐。

修改后的完整代码： #

HTML 代码：

<div class="input-container">
  <div class="input-group left-group">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
  </div>
  <div class="input-group right-group">
    <label for="sname">Second Name</label>
    <input type="text" id="sname" name="sname">
  </div>
</div>

CSS 代码：

/* 外层容器，负责整体居中并分配两个输入项的空间 */
.input-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* 两个输入框之间的空隙，可根据需求调整 */
  width: 100%;
}

/* 每个输入项的容器，占40%宽度 */
.input-group {
  width: 40%;
}

/* 标签样式：左边左对齐，右边右对齐 */
.left-group label {
  display: block;
  text-align: left;
  margin-bottom: 8px;
}

.right-group label {
  display: block;
  text-align: right;
  margin-bottom: 8px;
}

/* 输入框样式 */
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
}

input[type=text]:focus {
  outline: none;
}

代码说明： #

• 用flex布局的外层容器input-container，通过justify-content: center让两个输入项整体居中，gap属性控制它们之间的间距，避免挤在一起。
• 每个input-group设置为40%宽度，刚好满足你的需求。
• 标签设置为display: block，确保它们独占一行，然后分别设置text-align: left和text-align: right来实现左右对齐的效果。
• 输入框设置为width: 100%，会自动填充所在input-group的40%宽度，配合box-sizing: border-box确保padding不会撑大宽度。

这样调整后，就能完美实现你想要的布局效果啦！

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