使用 calc 设置输入宽度不能按预期工作答案

【问题标题】：Setting input width with calc does not work as expected使用 calc 设置输入宽度不能按预期工作
【发布时间】：2017-08-03 21:27:06
【问题描述】：

我有一个带有width: calc(100% - 100px); 的输入，没有填充/边距/边框。我想在 position : inline-block; 和 width : 100px; 旁边放一个 div。

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

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

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

【问题讨论】：

标签： html css css-position css-calc

【解决方案1】：

删除元素之间的空白。默认情况下， 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>

【讨论】：

谢谢 :) 有没有办法禁用这种行为？例如通过向 DOCTYPE 或 html 标记或元数据添加一些内容？
@Arashsoft 我不知道。如果您使用 inline 或 inline-block 元素，这是 html 和 css 的基本方面。就像字母/单词一样，您需要它们之间的空间。内联元素就像字母/单词。