HTML输入框无法占满宽度输入，输入内容左侧消失问题求助

我看了你的代码，问题出在几个CSS属性的设置上，咱们一步步来修复：

核心问题分析 #

1. 输入区域被压缩：你给input, textarea设置了padding: 1.5% 50% 2% 0，其中padding-right: 50%直接把输入框的可用空间挤掉了一半，导致只能在左侧半行输入。
2. 宽度自适应导致的布局混乱：width: auto让输入框的宽度由内容和内边距决定，再加上display: block，输入框的实际宽度无法撑满容器，还可能和label文字出现重叠/覆盖的情况。
3. 负margin引发的布局重叠：.preencher的margin-top: -5%可能会让输入区域和上方的header重叠，间接影响输入框的可交互范围。

修改后的代码 #

CSS部分 #

.contato { 
  background-color: white; 
  width: 75%; 
  height: 80%; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 10%; 
}
.contato .header { 
  background-color: #353E49; 
  border-style: solid; 
  border-color: lightgrey; 
  border-bottom: none; 
  border-width: 0.5px; 
}
.contato h1 { 
  margin-left: 10%; 
  color: white; 
  padding: 5% 0; 
  font-family: "lato regular"; 
  letter-spacing: 2px; 
  font-size: 1.5rem; /* 补充缺失的字体大小值 */
}
input, textarea { 
  display: block; 
  background: transparent; 
  border: none; 
  border-bottom: 1px solid #CECFD3; 
  padding: 1.5% 0 2% 1%; /* 移除50%的右内边距，增加左内边距优化输入体验 */
  resize: vertical; 
  width: 100%; /* 设置为100%撑满容器 */
  box-sizing: border-box; /* 确保内边距不会撑开宽度 */
  font-family: "Lato Regular"; 
  color: darkgray; 
  font-size: 1.05rem; /* 修正空格语法错误 */
}
.preencher { 
  border-style: solid; 
  border-color: lightgrey; 
  border-width: 0.5px; 
  border-top: none; 
  padding: 5% 10% 5%; /* 增加左右内边距，优化视觉体验 */
  margin-top: 0; /* 移除负margin，避免布局重叠 */
}
/* 可选：优化label样式，让文字和输入框排版更清晰 */
.preencher label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
}

HTML部分（修正一处输入类型错误） #

<div class="contato">
  <form name="contato" method="POST" netlify>
    <div class="header">
      <h1>Contato</h1>
    </div>
    <div class="preencher">
      <p>
        <label>Nome: <input type="text" name="nome"></label>
      </p>
      <p>
        <label>E-mail: <input type="email" name="email"></label>
      </p>
      <p>
        <label>Empresa/site: <input type="text" name="empresa"></label> <!-- 将type="email"改为text，符合输入内容类型 -->
      </p>
      <p>
        <label>Mensagem: <textarea name="mensagem"></textarea></label>
      </p>
      <p>
        <button type="submit">Send</button>
      </p>
    </div>
  </form>
</div>

关键修改说明 #

• 移除padding-right: 50%并调整内边距，让输入区域可以使用完整的容器宽度。
• 给input, textarea添加width: 100%和box-sizing: border-box，确保输入框撑满父容器且不会因内边距溢出。
• 修复.preencher的负margin问题，避免和header区域重叠，同时增加左右内边距优化视觉体验。
• 修正font-size的语法错误（原代码1.05 rem多了空格），并给h1补充缺失的字体大小值。
• 调整“Empresa/site”对应的输入类型，使其符合内容场景。

这样修改后，输入框就能全屏输入，输入时也不会出现左侧内容消失的问题了。

内容的提问来源于stack exchange，提问作者Pedro Henrique Quiste