0

因此，我们最近将浏览器支持政策更改为 Windows 7 上的 IE 8 / 9、Firefox、Chrome 和 Safari，所有这些都box-sizing: border-box;以某种形式提供支持（例如，有些需要前缀-moz-）。这使我们能够创建一个宽度为 45em 的表单，使用宽度为 21em 且边距为 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>

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

4

1 回答 1

1

这是一篇很好的文章：与内联块元素之间的空间战斗。

于 2013-03-23T13:59:17.893 回答