如何巧妙运用HTML li标签打造独特布局效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1022个文字，预计阅读时间需要5分钟。
浏览器中看到的是独立的 `` 标签内容。
常见错误现象：<li> 直接写在 <body> 里，以为能显示圆点，实际可能没缩进、没符号，甚至被压到页面顶部。
- 永远用
<ul>内容</ul>或<ol>内容</ol>包裹<li> - 嵌套列表时，内部才能放另一个
<ul>，不能把<ul>放在<ul>外面再塞<li> - 空列表
<ul></ul>是合法的，不会报错，但也不会渲染任何东西
list-style-type 不生效？先看 display 是否被改掉
list-style-type 只对 display: list-item 的元素生效，而 <li> 默认就是它；一旦你给 <li> 设了 display: flex 或 display: inline，圆点/数字就消失了——不是属性失效，是元素不再被视为“列表项”。
使用场景：想让列表横向排列、加图标、或和按钮并排时，容易误删默认 display。
本文共计1022个文字，预计阅读时间需要5分钟。
浏览器中看到的是独立的 `` 标签内容。
常见错误现象：<li> 直接写在 <body> 里，以为能显示圆点，实际可能没缩进、没符号，甚至被压到页面顶部。
- 永远用
<ul>内容</ul>或<ol>内容</ol>包裹<li> - 嵌套列表时，内部才能放另一个
<ul>，不能把<ul>放在<ul>外面再塞<li> - 空列表
<ul></ul>是合法的，不会报错，但也不会渲染任何东西
list-style-type 不生效？先看 display 是否被改掉
list-style-type 只对 display: list-item 的元素生效，而 <li> 默认就是它；一旦你给 <li> 设了 display: flex 或 display: inline，圆点/数字就消失了——不是属性失效，是元素不再被视为“列表项”。
使用场景：想让列表横向排列、加图标、或和按钮并排时，容易误删默认 display。