为什么输入字段比它的父 div 更宽？答案

【问题标题】：Why are input fields wider than it's parent div?为什么输入字段比它的父 div 更宽？
【发布时间】：2023-04-06 03:15:01
【问题描述】：

为什么表单输入字段比其父 div 宽？宽度应用于文本 div，但不适用于其中包含表单字段的 div。为什么会这样？

See the livecode here.

.parent {
  width: 400px;
  background-color: yellow;
}

.left {
  display: inline-block;
  width: 50%;
  background-color: red
}

.right {
  display: inline-block;
  width: 30%;
  background-color: blue
}

<div class="parent">
  <div class="left">This is text</div>
  <div class="right"><input type="text"></div>
  <div class="left">This is text</div>
  <div class="right">text</div>
</div>

【问题讨论】：

标签： css width form-fields

【解决方案1】：

确保将输入字段的最大宽度设置为 100%，并将 box-sizing 设置为边框框，以确保填充和边框在 100% 范围内：

input {
    max-width: 100%;
    box-sizing: border-box;
}

.parent {
  width: 400px;
  background-color: yellow;
}

.left {
  display: inline-block;
  width: 50%;
  background-color: red
}

.right {
  display: inline-block;
  width: 30%;
  background-color: blue
}

<div class="parent">
  <div class="left">This is text</div>
  <div class="right"><input type="text"></div>
  <div class="left">This is text</div>
  <div class="right">text</div>
</div>

【讨论】：