防止“美化”选项卡翻译为空格

因此，我们最近将浏览器支持政策更改为IE 8/9，Firefox，Chrome & Windows 7上的Safari，所有这些支持box-sizing: border-box;以某种形式或另一种形式（某些需要前缀，例如-moz-）。这使我们能够创建宽度为45em的表格，使用宽度为21em的标签和1em的margin-right（在标签和相关的输入/选择之间创建一些空格），然后将选择/文本输入设置为23em。 Textareas是45em，我们使用与文本对齐的div从右到右对齐按钮。该表格排列完美，无需浏览器特定的调整！防止“美化”选项卡翻译为空格

然而，当我开始一个新项目时，昨晚我陷入了一个问题。我使用这种技术，但无法使其工作。投入都下降到下一行。我终于弄清楚问题的根源是什么，但找不到解决方法（我喜欢）。这是我使用的标记：

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

事实证明，回车，我使用，使其更易于阅读标签被转换为空间。因此，标签和输入的实际总宽度是21em + 1em + 23em +一个空格，换句话说是45em +一个空格，但容器只有45em。我尝试过不同的CSS空白值，但没有运气。我真的不想把标签和输入放在代码的同一行上 - 它看起来很可怕，而且不容易阅读。有没有人有任何想法如何停止这一新的行，并选项卡，从被替换为空间？

来源

2013-03-23 ClarkeyBoy

这是一篇不错的文章：Fighting the Space Between Inline Block Elements。

来源

2013-03-23 13:59:17 darthmaim

谢谢。我没有足够的连接点来认识它只是内嵌块元素。这里有大量的文章，但所有的解决方案对我来说都显得有些不可靠。我希望代码整洁，而不是空的HTML注释，缺少结束标签或类似的东西。 :(猜我必须选择一个 – ClarkeyBoy 2013-03-23 14:14:44

这里还有另一个关于这些空格的SO问题：[忽略HTML中的空格]（http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html） – darthmaim 2013-03-23 14:26:37

防止“美化”选项卡翻译为空格

回答

相关问题