背景图上移位表单后文本框、下拉列表及按钮宽度无法修改问题排查求助

云原生阿岚

2026-4-30

解决表单元素宽度无法修改的问题

我看了你的代码，问题出在绝对定位的.top-left容器没有设置宽度。你给表单元素（input、select）用了百分比宽度，而百分比宽度是相对于父元素的宽度来计算的。.top-left作为绝对定位元素，默认宽度是由内部内容撑开的，所以不管你给子元素设多少百分比，它的实际宽度都会被内容限制住，看起来就像无法修改一样。

修复步骤：

给.top-left容器设置一个明确的宽度（可以是固定像素或者百分比，根据你的需求调整）
如果你希望表单元素的宽度能更灵活，也可以把它们的宽度改成100%，这样会自动填满.top-left的宽度，后续只需要调整容器宽度就能控制表单元素的大小

修改后的CSS代码片段：

/* 给.top-left添加宽度和内边距优化显示 */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  width: 350px; /* 可根据需求调整数值 */
  padding: 0 15px; /* 避免内容贴边，提升视觉体验 */
}

/* 调整表单元素宽度适配容器 */
input[type=text], select {
  width: 100%; /* 替换原21%，让元素填满容器 */
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input[type=number] {
  width: 100%; /* 替换原21% */
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input[type=button] {
  width: 100%; /* 替换原20%，也可设固定值如180px */
  background-color: #111;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}