使用 calc 设置输入宽度无法按预期工作

Question

我有一个 width: calc(100% - 100px); 没有 padding/margin/border 的输入。我想在它旁边放一个 div 和 position : inline-block; 和 width : 100px;.

div 转到下一行，但我找不到任何原因。如果我将 div 宽度减小到 96px 那么它就可以正常工作。我想知道是什么导致 4px 缺少宽度！

请注意 box-sizing : borderbox 与此问题无关，因为我没有任何填充或边框。

这里是 the plunker，用 chrome 和 firefox 测试过。

Answer 1

删除元素之间的白色space。默认情况下，inline 和 inline-block 将保留元素之间的 space，因为它们是内联的（就像 words/letters 之间的 space）。您还可以在它们之间添加 HTML 注释，这样就不会出现白色的 space。

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><div style="width: 97px; display: inline-block">97 px Div</div>

或

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><!--
--><div style="width: 97px; display: inline-block">97 px Div</div>

使用 calc 设置输入宽度无法按预期工作

Setting input width with calc does not work as expected

html

css

css-position

css-calc