浏览器默认为<ul>内合法嵌套的<li>渲染实心圆点（disc），无需额外CSS；圆点不显示主因是HTML结构错误（如<li>未包裹于<ul>）或CSS干扰（如list-style: none、padding-left: 0、display非list-item等）。
怎样用 <ul> 和 <li> 渲染带圆点的无序列表
浏览器默认就会给 <ul> 里的 <li> 加实心圆点（disc），只要结构正确，不用额外写 CSS 就能显示。关键不是“怎么加”，而是“为什么有时没圆点”——通常卡在 HTML 结构或 CSS 重置上。
-
<ul>必须包裹<li>，不能直接放文本或其它块级元素（比如<p>） - 如果用了 CSS 框架（如 Bootstrap）或自定义样式，
list-style-type: none可能被继承或全局设置，会吃掉圆点 - 部分编辑器/富文本组件会自动把
<ul>转成<ol>或内联样式，需检查源码
如何确认圆点是否被 CSS 干扰
打开开发者工具，选中一个 <li> 元素，在 Styles 面板里搜 list-style。常见干扰项：
-
list-style: none—— 直接干掉所有标记 -
list-style-type: none—— 只干掉类型，但若同时设了list-style-image，可能显示为空白图 -
ul { padding-left: 0 }或margin-left: 0—— 不影响圆点本身，但会让圆点贴左、看起来像没出现
恢复默认只需一行：ul { list-style-type: disc; }
<ul> 的 type 属性还管用吗
HTML5 已废弃 <ul type="square"> 这类属性，现代浏览器基本忽略它。想换方块、空心圆或罗马数字，必须用 CSS 的 list-style-type：
ul.square { list-style-type: square; }
ul.circle { list-style-type: circle; }
ul.roman { list-style-type: upper-roman; }
注意：list-style-type 对 <ul> 有效，对 <li> 单独设置无效；且不支持自定义图标，要图标得用 list-style-image 或伪元素。
嵌套列表时圆点层级混乱怎么办
浏览器默认对嵌套 <ul> 有层级样式（比如外层 disc，内层 circle，再内层 square），但这个行为不可靠——尤其跨浏览器或用了重置 CSS 后。稳妥做法是显式声明：
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
更麻烦的是：如果父 <ul> 设了 list-style: none，子列表不会自动恢复，必须逐层重写。这点容易漏查。
圆点是否显示，本质是三层叠加：HTML 结构合法 + 浏览器默认样式未被覆盖 + 无 display: inline 等意外布局干扰。最容易被忽略的是 CSS 继承链里某一层静默吃了 list-style，而不是标签写错了。
