問題描述

數(shù)字有個(gè)位數(shù)到百位數(shù)

padding:10px; background-color:#F00; color:#fff; border-radius:50%;

<span class='alert'>9</span>

<span class='alert'>999</span>

如何讓它保持正圓的同時(shí)當(dāng)有數(shù)字時(shí)不變形？ 個(gè)位數(shù)和百位數(shù)

問題解答

網(wǎng)上找了個(gè)

<p class='circle'> <span>999999</span></p>

.circle { display: inline-block; text-align: center; line-height: 1; background-color: red; border-radius:50%; font-size: 14px;}.circle span { display: block; padding: 50%; margin: -2em -50% 0; position: relative; top: 1em; border: 0.5em solid transparent; white-space: nowrap;}

http://jsfiddle.net/zcd75Lcd/

你要行把span設(shè)置為block 設(shè)置個(gè)寬高像下面的樣式

width: 30px;height: 30px;background-color: #F00;color: #fff;border-radius: 50%;display: block;text-align: center;line-height: 30px;

border-radius：xxx 寬度是 元素的長度的一半