html - 防止 'prettifying' 制表符转换为空格

Question

因此我们最近将我们的浏览器支持政策更改为 IE 8/9、Firefox、Chrome 和 Windows 7 上的 Safari，所有这些都支持 box-sizing: border-box; 以某种形式或另一个(有些需要前缀，例如 -moz-)。这使我们能够创建一个宽度为 45em 的表单，使用宽度为 21em 且 margin-right 为 1em 的标签(在标签和关联的输入/选择之间创建一点空间)，然后将选择/文本输入设置为 23em。 Textareas 是 45em，我们使用带有 text-align right 的 div 来右对齐按钮。表单完美排列，无需针对浏览器进行调整!

然而，当我昨晚开始一个新元素时，我遇到了一个问题。我使用了这种技术，但无法让它发挥作用。输入全部下降到下一行。我终于弄清楚问题的根源是什么，但找不到(我喜欢的)方法来解决它。这是我正在使用的标记:

<div class="input-pair">
    <label for="mainBackgroundColor">Background Colour</label>
    <input type="text" id="mainBackgroundColor" name="mainBackgroundColor" class="text color">
</div>

事实证明，我用来使其更易于阅读的回车符和制表符被转换为空格。所以label和input的实际总宽度是21em + 1em + 23em + 一个空格，也就是说45em + 一个空格，但是容器只有45em。我在 CSS 中尝试了不同的空白值，但没有成功。我真的不想将标签和输入放在代码中的同一行 - 这看起来很糟糕而且不那么容易阅读。有谁知道如何阻止这一新行和制表符被空格替换？

Answer 1

这是一篇很好的文章:Fighting the Space Between Inline Block Elements .