css - 如何做一個完整的圓?裡面顯示數字
問題描述

數字有個位數到百位數
padding:10px; background-color:#F00; color:#fff; border-radius:50%;
<span class='alert'>9</span>
<span class='alert'>999</span>
如何讓它保持正圓的同時當有數字時不變形? 個位數和百位數
問題解答
回答1:網上找了個
<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/
回答2:你要行把span設置為block 設置個寬高像下面的樣式
width: 30px;height: 30px;background-color: #F00;color: #fff;border-radius: 50%;display: block;text-align: center;line-height: 30px;
回答3:border-radius:xxx 寬度是 元素的長度的一半
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?4. javascript - 移動端上不能實現拖拽布局嗎?5. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~6. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化7. 配置Apache時,添加對PHP的支持時語法錯誤8. 實現bing搜索工具urlAPI提交9. phpstudy8.1支持win11系統嗎?10. javascript - nodejs關于進程間發送句柄的一點疑問

網公網安備