使用僞類時避免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之間的空間：

回答

相關問題