PAYATHON 2026

设置 list-style: none 后，如何去掉列表多余的缩进并居中？

数据小许

解决方法：清除 <ul> 的默认内边距

在 .container 中添加 padding: 0;，去掉这段代码中导致列表项看起来偏右的默认缩进。list-style: none; 只隐藏列表标记，不会清除 <ul> 的内边距。

可以把原来的 .container 规则改成：

.container {
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  border: 4px solid black;
  height: 20rem;
  width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5%;
}

这里将 list-style: none; 放在了列表容器上，原来 .game 中的同名声明可以删除。

为什么圆点消失后还会有空白？

示例中，.container 是一个 <ul>。浏览器通常会为 <ul> 设置起始方向的默认内边距，给列表标记和内容留出空间。在当前从左到右的布局中，这段内边距表现为左侧缩进。

原代码在 <li> 对应的 .game 上设置了 list-style: none;，所以圆点消失了，但父元素 <ul> 的默认内边距还在。

容器还使用了：

flex-direction: column;
align-items: center;

在这个布局中，align-items: center; 控制列表项的水平对齐。列表项相对于容器的内容区域居中，左侧内边距会使内容区域偏向右侧，因此列表项看起来没有相对于外框居中。清除 padding 后，现有的对齐规则就能达到预期效果。

哪些间距需要保留？

.game 中的 padding: 5px; 控制文字与每个列表项边框之间的距离，可以保留。它不是这次列表整体偏移的原因。

margin-top: 2rem; 控制整个列表与上方的距离，也可以保留。如果还想统一清除 <ul> 的其他默认外边距，可以把原来的 margin-top 替换为：

margin: 2rem 0 0;

排查时，在浏览器开发者工具中选中 <ul class="container">，查看盒模型和计算后的 padding，确认默认缩进是否已被覆盖。

备注：内容仅供参考。