CSS徽章寬度和高度

我正在創建一些css徽章，但問題是，請確保bagde正常於0-99之間的某個數字，但問題是當我有100個最後一個數字離開徽章時？CSS徽章寬度和高度

如果數字大於99，是否有可能使徽章更大？

這裏是我的代碼

CSS

.badge[data-badge]:after { 
    content:attr(data-badge); 
    font-size:.7em; 
    background:rgba(48, 174, 227, 1); 
    color:white; 
    width:18px; 
    height:18px; 
    text-align:center; 
    line-height:18px; 
    border-radius:50%; 
    box-shadow:0 0 1px #333; 
    margin-top: 7px; 
    float:left; 
}

HTML

<span class='badge' data-badge='27'></span>

這裏正在撥弄 https://jsfiddle.net/kx5kow5m/

來源

2015-04-23 Miomir Dancevic

你嘗試設置'寬度：汽車;'？ – TheFrozenOne

然後，當我只有例子1，比徽章看起來不好 –

嘗試設置width: auto並添加min-width: 18px。

而且填充將是很好的補充：

width: auto; 
min-width: 18px; 
paddding: 4px;

Live Fiddle

來源

2015-04-23 09:39:45 TheYaXxE

這將適用於三位數字。如果OP需要使用四位數字，則會失敗。 – TheFrozenOne

對我來說很好。他沒有說任何有關壞的應該是一個完美的圈子。 – TheYaXxE

看我的答案下他的評論。 – TheFrozenOne

設置width: auto並在需要時添加填充。

width:auto; 
padding: 2px;

實施例：https://jsfiddle.net/kx5kow5m/2/

來源

2015-04-23 09:34:29 TheFrozenOne

問題現在好，但如果我只有1，那bagde不去圓，試着說1 –

@ play2web是的，我只是注意到了這一點。等一下。 – TheFrozenOne

CSS徽章寬度和高度

回答

相關問題