我有一个width: calc(100% - 100px);没有填充/边距/边框的输入。我想在它旁边放一个 divposition : inline-block;和width : 100px;。
div 转到下一行，但我找不到任何原因。如果我将 div 宽度减小到 96px，那么它工作正常。我想知道是什么导致了 4px 缺少宽度！
请注意，box-sizing : borderbox这与此问题无关，因为我没有任何填充或边框。
这是plunker，用 chrome 和 firefox 测试过。
删除元素之间的空白。默认情况下， inline 和 inline-block 将保留元素之间的空间，因为它们是内联的（就像单词/字母之间的空格一样）。您还可以在它们之间放置一个 HTML 注释，这样那里就没有空格。
<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>