嘿，这个问题我太懂了——用硬空格凑对齐确实是饮鸩止渴，不同字体、屏幕尺寸甚至浏览器下，排版分分钟崩给你看。给你两个靠谱的方案，优先推荐第一个：

方案1：模拟Input容器（最可靠，响应式友好） #

核心思路是用一个容器包裹真实的Input，然后用两个独立的元素分别放置左右文本，通过绝对定位精确控制位置，同时保证输入时的原生体验：

HTML 结构 #

<div class="input-wrapper">
  <input type="text" name="name" placeholder=" " />
  <span class="placeholder-left">Name</span>
  <span class="placeholder-right">Nombre</span>
</div>

CSS 样式 #

/* 容器设置相对定位，作为文本的定位基准 */
.input-wrapper {
  position: relative;
  display: block;
  width: 100%; /* 支持响应式，也可以设固定宽度比如300px */
  max-width: 400px; /* 可选，限制最大宽度 */
}

/* 真实Input的样式，和你原来的保持一致即可 */
.input-wrapper input {
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

/* 模拟的左右占位文本 */
.input-wrapper .placeholder-left,
.input-wrapper .placeholder-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 点击时穿透到下方的Input，不影响输入 */
  color: #999; /* 原生Placeholder的默认灰色 */
  font-size: 16px; /* 和Input字体大小一致 */
}

/* 左文本对齐到Input的左内边距 */
.placeholder-left {
  left: 15px;
}

/* 右文本对齐到Input的右内边距 */
.placeholder-right {
  right: 15px;
}

/* 当Input有内容时，隐藏模拟的占位文本 */
.input-wrapper input:not(:placeholder-shown) + .placeholder-left,
.input-wrapper input:not(:placeholder-shown) ~ .placeholder-right {
  display: none;
}

这个方案的优势：

• 完全不受字体、屏幕尺寸影响，响应式下自动适配
• 左右文本的位置可以精确控制，不会错位
• 输入内容时自动隐藏占位文本，和原生Input体验完全一致

方案2：原生Placeholder的 Hack 方法（局限性大） #

如果一定要用原生的Placeholder属性，可以试试用文本对齐的技巧，但兼容性和排版效果不如方案1：

input::placeholder {
  text-align: justify;
  width: 100%;
}

input::placeholder::after {
  content: "";
  display: inline-block;
  width: 100%;
}

这个方法是通过text-align: justify让两端对齐，然后用伪元素撑满宽度。但缺点很明显：

• 不同浏览器对Placeholder伪元素的支持不一致
• 如果文本长度差异大，中间的空白会被拉伸，视觉效果奇怪
• 无法精确控制左右文本的间距

所以还是优先选方案1哦～

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