为什么“检查元素”在悬停时将输入元素的宽度显示为 100%，但其实际宽度较小？

如何解决为什么“检查元素”在悬停时将输入元素的宽度显示为 100%，但其实际宽度较小？

悬停在输入元素上的橙色带延伸到屏幕的整个宽度。但在开发工具中显示的元素的实际宽度仅为 169px。如果橙色条带不代表宽度，那它代表什么？

如果我将鼠标悬停在标签字段上，橙色宽度也会采用全宽，但现在在开发工具中显示的宽度为 820 像素。为什么会有这种差异？

请注意，我已将 display:block 分配给所有 input 和 label 字段。

解决方法

这是因为输入在 css 中有 display: block：

块级元素总是从新行开始。块级元素总是占据可用的整个宽度（尽可能向左和向右伸展）。

Attribution

将 CSS 更改为 display: inline-block 不会导致这种情况。

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

<input type="text" class="block" placeholder="block"><span>more text</span>
<br>
<input type="text" class="inline-block" placeholder="inline-block"><span>more text</span>
<p>Use dev-tools to see the difference...

,

元素本身只有这么宽，但它的渲染块是全宽的（如橙色矩形所示）。渲染块占用的空间本质上是保留的。如果你在那个输入之后放另一个输入，它会掉到一个新行。

<form>
    <input type="text" value="blocked!" style="display: block;" />
    <input type="text" value="dropped!" /> 
    <input type="text" value="not dropped!" />
</form>