在网页样式开发中，列表元素（包括无序列表ul、有序列表ol、自定义列表dl）默认会被浏览器赋予一定的内边距，其中右侧内边距常常会导致列表内容与容器右侧边缘产生不必要的空隙，影响整体布局的紧凑性。我们可以通过CSS的相关属性来精准移除列表项的右侧内边距，适配不同的布局需求。
基础移除方法：直接设置padding-right
最直接的方式是给列表项<li>标签设置padding-right: 0，这种方式适用于所有列表项需要统一移除右侧内边距的场景。
首先看无序列表的示例，HTML结构如下：
<ul class="demo-list"> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul>
对应的CSS代码为：
.demo-list li {
/* 移除列表项右侧内边距 */
padding-right: 0;
/* 可选：保留其他方向的内边距，避免布局错乱 */
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
border: 1px solid #eee;
}
处理列表容器的默认内边距
有时候列表容器本身（ul、ol、dl）也会带有默认的padding，尤其是右侧内边距，这时候需要同时处理容器的样式，才能达到完全移除右侧空隙的效果。
以有序列表为例，HTML结构如下：
<ol class="num-list"> <li>第一步操作</li> <li>第二步操作</li> <li>第三步操作</li> </ol>
CSS代码需要同时设置容器和列表项：
.num-list {
/* 移除列表容器右侧内边距 */
padding-right: 0;
/* 移除浏览器默认的左侧内边距，可根据需求调整 */
padding-left: 0;
list-style-position: inside;
}
.num-list li {
padding-right: 0;
padding-top: 6px;
padding-bottom: 6px;
}
自定义列表的特殊处理
自定义列表dl包含dt（术语）和dd（描述）两部分，这两部分默认也会有内边距，需要分别设置才能移除右侧内边距。
HTML结构示例：
<dl class="define-list"> <dt>CSS</dt> <dd>层叠样式表，用于描述网页的表现形式</dd> <dt>HTML</dt> <dd>超文本标记语言，用于构建网页结构</dd> </dl>
对应的CSS代码：
.define-list {
padding-right: 0;
}
.define-list dt {
padding-right: 0;
font-weight: bold;
margin-top: 10px;
}
.define-list dd {
padding-right: 0;
margin-left: 16px;
color: #666;
}
注意事项
- 移除内边距前建议先通过浏览器开发者工具查看元素默认的内边距值，避免误删其他方向的内边距导致布局错乱。
- 如果列表项有背景色或者边框，移除右侧内边距后需要检查内容是否贴边，可适当添加margin-right调整间距。
- 不同浏览器的默认样式可能存在差异，建议使用CSS重置样式统一基础样式后再做调整。
常见问题解答
为什么设置了li的padding-right:0还是有效果？
这种情况通常是列表容器ul或者ol本身带有padding-right，需要同时给容器设置padding-right: 0才能完全移除右侧空隙。
移除右侧内边距会影响列表标记的位置吗？
如果列表标记是outside位置（默认值），移除内边距不会影响标记位置；如果设置了list-style-position: inside，标记会算作列表项内容的一部分，这时候调整内边距会影响标记的排列。