CSS列表标记默认基于内容区左边缘定位，不受padding和relative影响；用list-style-position:inside可使标记随文字缩进，outside则需手动预留空间并调整text-indent；避免对li设relative，优先用margin或伪元素替代。
列表标记（如
、
、
）默认出现在行框左侧，但一旦给
设置了
或内边距（
），标记位置常会偏移、错位甚至被裁切。核心原因是：CSS 列表标记的定位不随
或
相对定位
移动，它始终基于内容区左
边缘计算
，且不受
/
影响。
用
控制标记归属区域
默认值
会让标记脱离内容流，独立于
；设为
后，标记成为内容的一部分，会响应
，并随文字一起缩进：
—— 标记紧贴文字左侧，整体向右缩进
适合需要精确控制文本起始位置的场景（如对齐段落首行）
注意：
下标记可能被长文本换行覆盖，必要时加
或调整行高
用
配合
手动留白
保留默认
更稳妥（避免换行干扰），但需手动为标记预留空间：
再通过
把文字左移，让第一行文字与标记对齐
等效于：标记在
处渲染，文字从
开始，视觉上对齐
避免对
直接设
干扰标记
不影响标记位置本身，但若同时设置了
或
，会导致内容位移而标记不动，造成错位：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
方案一：把相对定位移到内部
或
上，
保持
静态定位
方案二：改用
替代
实现水平偏移，不影响标记逻辑
方案三：彻底放弃原生标记，用
伪元素
自定义图标 +
绝对定位
，完全可控
检查父容器
和字体渲染干扰
有时标记“消失”并非定位问题，而是被裁剪或渲染异常：
确认
或
没有
，尤其配合
使用时
某些字体（如中文字体）下
渲染异常，可换用
或 SVG
移动端 WebKit 内核偶有标记偏移，加
可缓解
disccirclesquareliposition: relativepaddingpadding-leftlefttoplist-style-position: insideoutsidepaddinginsidepadding-leftli { list-style-position: inside; padding-left: 20px; }insidetext-indentpadding-leftlist-style-position: outsideoutsideli { list-style-position: outside; padding-left: 30px; }text-indent: -15px;0px15pxliposition: relativerelativelefttransformspanplimargin-leftleft::beforeoverflowullioverflow: hiddenpaddinglist-style-typelist-style-imageli { vertical-align: top; }