输入框设置width:100%时超出容器并覆盖按钮的问题求助

嘿，我来帮你捋清楚这个问题的根源和解决办法～

首先，你遇到的问题核心是CSS盒模型的默认行为：浏览器默认用 content-box 作为盒模型计算规则，也就是说你给 .input-box 设置的 width: 100% 只算输入框的内容区域宽度，但输入框本身默认带有 border 和 padding，这些额外尺寸会被加到内容宽度上，导致整体宽度超过父容器 .child-1 的范围，自然就溢出到按钮那边了。

你试的 width:99% 属于治标不治本的办法——不同浏览器的默认 border/padding 大小可能有差异，而且还会留下间隙；给按钮加margin也只是把按钮挪开，并没有解决输入框本身溢出的问题。至于换成按钮就正常，是因为按钮默认不会设置 width:100%，它的宽度是自适应内容的，自然不会出现溢出情况。

接下来给你几个靠谱的解决方案：

方案一：修改盒模型（最推荐） #

给输入框加上 box-sizing: border-box，这样 width:100% 就会把 border 和 padding 都包含进去，整体宽度刚好填满父容器：

.input-box{
  width: 100%;
  box-sizing: border-box; /* 关键属性 */
  /* 可以自定义border/padding，不会影响宽度计算 */
  border: 1px solid #ccc;
  padding: 4px 8px;
}

方案二：优化Flex布局（可选） #

你的Flex结构已经没问题了，但可以再确保父容器没有默认间隙，比如给 .parent 加上 gap: 0（默认flex布局gap为0，除非你之前额外设置过），另外也可以让按钮填满 .child-2，和输入框高度对齐，视觉上更协调。

修改后的完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <title> Practice </title>
  <style>
    .parent{
      display: flex;
      flex-direction: row;
      gap: 0; /* 确保子元素之间无间隙 */
    }
    .child-1{
      flex: 1;
    }
    .input-box{
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #ddd;
      padding: 6px;
    }
    .child-2{
      width: 100px;
    }
    button{
      opacity: 0.8;
      width: 100%; /* 按钮填满child-2 */
      height: 100%; /* 和输入框高度对齐 */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child-1">
      <input class="input-box" placeholder="Search">
    </div>
    <div class="child-2">
      <button>Click me</button>
    </div>
  </div>
</body>
</html>

这样修改后，输入框就会刚好填满 .child-1，和按钮紧挨着没有间隙，也不会溢出啦～

内容来源于stack exchange