使用伪类时避免DOM之间的空间：

之前我必须做一些基本的事情，因为我不想在下面的每个字母之间的空格。使用伪类时避免DOM之间的空间：

HTML：

<i class="icon icon1"></i> 
<i class="icon icon2"></i> 
<i class="icon icon3"></i>

CSS：

.icon { 
    display: inline-block; 
    position: relative; 
    padding: 3px; 
    background: yellow; 
    margin: 0; 
} 

.icon1:before { 
    content: "A"; 
} 

.icon2:before { 
    content: "B"; 
} 

.icon3:before { 
    content: "C"; 
}

链接：http://jsfiddle.net/qhoc/rkRBY/

我相信空间是自动出现的每个字符，除非之间。我的要求是：

所有字符必须在同一行
将有更多的图标4，icon5等。
不改变字体大小它们之间没有空间
OK添加HTML包装，但不会碰到JS或将<i>更改为其他东西。顺便提一下，我使用Bootstrap。

让我知道是否有解决方法！谢谢。

来源

2013-11-04 HP.

你想这样吗？ [链接]（http://jsfiddle.net/rkRBY/1/）。 –

'：before'是一个伪元素，*不是*伪类。 –

有两个很好的方式据我所知，

中的元素（或）之间的HTML标记
添加display: table-cell该元素不要给空间。

试试这个：

.icon { 
    display: table-cell; 
    /* removed padding: 3px; */ 
    position: relative; 
    background: yellow; 
    margin: 0px; 
} 

.icon1:before { 
    content: "A"; 
} 

.icon2:before { 
    content: "B"; 
} 

.icon3:before { 
    content: "C"; 
}

Working Fiddle

来源

2013-11-04 08:51:30

如果你有很多'我'，那么我建议你去除HTML中的空间，因为使用'display：table-cell'可以使元素保持在同一行。 –

在这里创建空间方面，display：table-cell与display：inline-block有什么不同？只是好奇？！ –

@惠普。即使我不知道这一点..刚刚意识到在设计一个网站:) –

还有就是元素之间的空间，这样，

<i class="icon icon1"></i><i class="icon icon2"></i><i class="icon icon3"></i>

演示：http://jsfiddle.net/rkRBY/10/

来源

2013-11-04 08:53:56

好点。我不知道linebreak可以做大事。但是我在Haml中编写了HTML，并且它自动为每个DOM创建了一个新行。 Urgh！所以在某种程度上，我不能使用它。 –

使用伪类时避免DOM之间的空间：

回答

相关问题