前端关于添加一个带有数字圈，类似手机端有多少条未读信息那样子，自己的坑来备注下。

最新推荐文章于 2024-07-10 14:55:17 发布

it_breaker

最新推荐文章于 2024-07-10 14:55:17 发布

阅读量1.7k

点赞数 3

分类专栏：在技术的路上越走越远

本文链接：https://blog.csdn.net/qq_27524417/article/details/80481771

版权

在技术的路上越走越远专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以往，对于这种小的控件类型，或者说功能，喜欢用span来解决，今天才发现，span在“position:absolute;”下，文字是无法垂直居中的，无论是“text-align:center;”，“vertical-align:middle;”，抑或与height保持一致的“inline-height”都行不通，最蠢的办法就是利用padding，但是padding弄处理，在不同屏幕分辨率上，简直愁。

于是，改成用div去实现，添加样式，这里用了“inline-height”：

.tabsInfo {
position: absolute;
top: 0px;
left: 55%;
height: 16px;
width: 16px;
background: red;
line-height: 16px;
color: #fff;
border-radius: 50%;
font-size: 12px;

}

结果例如下图所示：