CSS ::在使用字體時，僞屬性可以限制寬度分配嗎？

我正在使用FontAwesome字體來推送當前項目中的圖標，並且想要在某些標籤上使用:: before僞屬性。CSS ::在使用字體時，僞屬性可以限制寬度分配嗎？

正如您在下面的圖片中看到的，標籤的對齊關閉。我希望使用'width'屬性來解決這個問題，以確保圖標水平佔用相同數量的空間。

我目前使用的CSS是

.title::before { 
    font-family: FontAwesome; 
    font-size: 1.2em; 
    margin-right: 5px; 
    width:35px; // this can be 34523px and still does nothing for the view 
} 

&.error .title::before { 
    content: $fa-var-exclamation-circle; 
    color: $color_error; 
}

AlthoughI知道對象是字體字形，有它自己的字體大小。我不想操縱更寬的圖標的字體大小以適應差異。如上所述，當我按照原樣應用寬度時，沒有變化。

看起來這是一個合理的風格元素。我錯過了什麼嗎？

來源

2015-08-21 beauXjames

你試過添加'display：inline-block;'結合寬度嗎？ – caramba

我現在做了...賓果...我可以在哪裏運送啤酒？ – beauXjames

讓我們那麼回答：添加

display: inline-block;

的元素 - >http://jsfiddle.net/d72bo9q1/1/

.xxx:before { 
 
    content: 'x'; 
 
    background-color: green; 
 
    width: 100px; 
 
    display:inline-block; 
 
} 
 
.xxx { 
 
    background-color:orange; 
 
}

<div class="xxx">bla bla bla</div>

來源

2015-08-21 20:35:38 caramba

margin-right總是相對於::之前的內容，所以我會把它拿出來......顯示器：inline-block是所需的所有行爲如預期 – beauXjames

@beauXjames謝謝你！ – caramba

@beauXjames什麼沒有啤酒，但你標記我的答案是正確的？對我來說這是一個不好的交易，但無論如何它的一切都完成了，我們甚至:) – caramba

嘗試display: inline-block;和text-align: center;添加到.title::before

.title::before { 
    display: inline-block; 
    text-align: center; 
    width:35px; 
    font-family: FontAwesome; 
    font-size: 1.2em; 
    margin-right: 5px; 
}

display: inline-block;允許您設置元素的寬度。 text-align: center;確保圖標彼此居中。

希望它有幫助。

來源

2015-08-21 20:37:29 Lasse

CSS ::在使用字體時，僞屬性可以限制寬度分配嗎？

回答

相關問題