小红点需用绝对定位+伪元素实现，父容器设position:relative，子元素用top:0;right:0;transform:translate(50%,-50%)精确定位右上角，配合min-width、border-radius:50%和data属性控制显隐，兼顾可访问性与响应式适配。
小红点怎么加到列表项右上角
小红点本质是用 CSS 绝对定位实现的装饰性元素，不是 HTML 内置功能。直接写 <span class="badge"></span> 然后配样式最稳妥，别指望用 <sup></sup> 或 emoji（比如 ?）来“凑合”，它们位置飘、大小难控、响应式下容易错位。
关键点：
- 容器（比如
<li>）必须设position: relative，否则position: absolute会相对于整个页面定位 - 小红点本身用
width/height设为 8px–10px，border-radius: 50%保证圆；background-color: #ff4757（小红点常用色），避免用red——太刺眼且不统一 - 用
top: 0; right: 0;放右上角，再加transform: translate(50%, -50%)微调，让圆心精准落在角点
怎么控制小红点只在未读消息出现
靠 HTML 结构区分就行，不需要 JS 切换——零基础就用静态标记。给未读项加一个 class="unread"，然后用 CSS 选择器 .unread .badge 控制显隐，已读项不放 <span class="badge"></span> 就行。
别写一堆 if (isUnread) { ... }——那是学完 JS 后的事。现在直接手写两组 <li>：
- 未读：带
<span class="badge"></span>的完整结构 - 已读：只有文字，没 badge 元素，CSS 根本找不到它，自然不显示
这样既清晰又不会出错。如果硬要用 display 控制显隐，反而容易漏掉 class 或写错选择器，初学者调试起来更费劲。
列表整体怎么排版才像真实消息页
纯靠 <ul><li></ul> 默认样式会松散、无间距、无边框，得手动收一收。重点不是“好看”，而是“一眼看出这是消息列表”：
- 给
<ul></ul>加margin: 0; padding: 0;去掉浏览器默认缩进 - 每个
<li>设padding: 12px 16px;，上下留空、右边留出小红点位置 - 加
border-bottom: 1px solid #eee;每条消息下划线，最后一项用:last-child { border-bottom: none; }去掉多余线 - 字体用
font-size: 14px; line-height: 1.5;，太小看不清，太大不像消息流
别碰 Flex 或 Grid——它们会让初学者陷入“为什么没对齐”的死循环。老老实实用 padding + border，稳。
移动端小红点会被截掉怎么办
常见现象：在手机上看，小红点贴着右边跑出屏幕外。根本原因是 right: 0 定位时，父容器（<li>）没设 overflow: visible（默认就是 visible，但某些重置样式会改它）。
检查并确保：
- <li> 没有 overflow: hidden 或 overflow: auto
- 如果用了 text-overflow: ellipsis，要放在独立的子容器里，别套在 <li> 上
更保险的做法：把小红点的 right 值从 0 改成 8px（配合 transform 调整），给右侧留点余量，比硬扛 overflow 问题更省事。
小红点本身尺寸小、颜色跳，用户扫一眼就能识别状态。真正容易被忽略的是容器的定位上下文和溢出行为——这两点没调对，再漂亮的圆也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
