CSS输入框显示溢出？一招解决宽度问题

最新推荐文章于 2025-09-10 21:33:54 发布

原创最新推荐文章于 2025-09-10 21:33:54 发布 · 348 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

问题描述

CSS样式输入框宽度100%，但是输入框右边被截断导致显示不全。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>API 设置</title>
  <style>
    body { font-family: sans-serif; padding: 8px; width: 360px; }
    .row { margin: 1px 0; }
    label { display: block; font-weight: 600; }
    input[type="text"], input[type="password"] { width: 100%; padding: 8px; }
    .btns { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
    button { padding: 8px 12px; cursor: pointer; }
    .hint { color: #888; font-size: 12px; margin-top: 4px; }
  </style>
</head>
<body>
  <h1>LLM API 设置</h1>
  <div class="row">
    <label for="api_key">API Key（必填）</label>
    <input id="api_key" type="password" placeholder="例如：sk-..." autocomplete="off">
    <div class="hint">提示：请不要在控制台打印 API Key。</div>
  </div>

  <div class="row">
    <label for="base_url">Base URL</label>
    <input id="base_url" type="text" placeholder="例如：https://api.deepseek.com">
  </div>

  <div class="row">
    <label for="model">Model</label>
    <input id="model" type="text" placeholder="例如：deepseek-chat">
  </div>

  <div class="btns">
    <button id="save_btn">保存</button>
  </div>

  <div id="msg" class="row" style="white-space:pre-wrap;"></div>

  <script src="options.js"></script>
</body>
</html>

问题解释

input{width: 100%}只是计算内容的宽度，不会包含内边距的长度也就是padding的长度，因此开头包含了body的padding距离，再加上100%的内容长度必然会导致总体的长度溢出body设定的长度。

实际宽度 = width + padding + border

问题解决

  <style>
    body { font-family: sans-serif; padding: 8px; width: 360px; }
    .row { margin: 1px 0; }
    label { display: block; font-weight: 600; }
    input[type="text"], input[type="password"] { width: 90%; padding: 5%; }
    .btns { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
    button { padding: 8px 12px; cursor: pointer; }
    .hint { color: #888; font-size: 12px; margin-top: 4px; }
  </style>

我们不让宽度占满，而是留有一定的余量，然后把剩余的余量分给padding