非打破空间创建一个可视空间呈现

不知道的时候，如果我只是在这里的东西，但在我的应用程序，我打算：非打破空间创建一个可视空间呈现

<label>Hello</label> 
<label>World</label>

，当他们被渲染，它看起来像：

|你好| |世界|

这两个标签之间有一些丑陋的空间（假设我给他们一个边框或背景颜色）;

如果我将标签移动到同一行上，它工作正常。

<label>Hello</label><label>World</label>

无论如何删除此空间？

2013-11-02 Toadums

这就是浏览器呈现内联元素的方式 - 不重复的空格按原样呈现，不管它是空格，制表符还是换行。

最可靠的方法是使用select来显示标签是块级元素，并将它们浮动。但是，您应该注意，通过浮动标签可以将它们从文档流中取出，从而导致父项崩溃 - 这可以使用旧版本clearfix hack修复，也可以仅在父元素上使用overflow: hidden修复。

比方说，您的标记看起来像这样：

<form> 
    <label>Hello</label> 
    <label>World</label> 
</form>

，将解决这个问题将是CSS：

form { 
    overflow: hidden; 
} 
label { 
    display: block; 
    float: left; 
}

另外，你可以用一个近似于空格的值来声明一个负边界由浏览器渲染引起，但它是不可预知的，特别是在处理灵活的字体大小，不同的字体系列以及不同的缩放级别时。

2013-11-02 22:27:00 Terry

回答