用display:inline实现前端未读消息小红点
时间: 2024-02-21 09:58:46 浏览: 34
使用 `display: inline` 实现未读消息小红点也是可行的,具体实现步骤如下:
1. 在需要显示未读消息的元素(如消息列表、聊天窗口等)中插入一个红色小圆点的 HTML:
```
<span class="unread-dot"></span>
```
2. 在 CSS 中设置 `.unread-dot` 样式:
```
.unread-dot {
display: inline;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: red;
margin-left: 5px;
vertical-align: middle;
}
```
这里的 `display: inline` 将小红点作为行内元素显示。`width` 和 `height` 控制小红点的大小,`border-radius` 设置圆角,`background-color` 设置背景颜色,`margin-left` 控制小红点与其他内容的间距,`vertical-align` 控制小红点的垂直对齐方式。
3. 动态控制小红点的显示与隐藏:
```
const unreadCount = 3; // 假设未读消息数量为 3
if (unreadCount > 0) {
document.querySelector('.unread-dot').style.display = 'inline';
} else {
document.querySelector('.unread-dot').style.display = 'none';
}
```
这样就可以使用 `display: inline` 实现前端未读消息小红点了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)