问题描述
悬停在输入元素上的橙色带延伸到屏幕的整个宽度。但在开发工具中显示的元素的实际宽度仅为 169px。如果橙色条带不代表宽度,那它代表什么?
如果我将鼠标悬停在标签字段上,橙色宽度也会采用全宽,但现在在开发工具中显示的宽度为 820 像素。为什么会有这种差异?
请注意,我已将 display:block
分配给所有 input
和 label
字段。
解决方法
这是因为输入在 css 中有 display: block
:
块级元素总是从新行开始。块级元素总是占据可用的整个宽度(尽可能向左和向右伸展)。
将 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>