制作按钮时如何彻底移除UL列表的项目符号及残留占位空间

设置list-style-type: none;后仍存在的预留占位，是浏览器默认样式给<ul>元素添加的左侧内边距（多数浏览器默认值为40px）。这个属性只会隐藏列表项目符号，不会自动清除浏览器为列表预留的缩进空间。

• 给ul选择器追加padding: 0;和margin: 0;两个属性，直接清除浏览器默认给列表加的内外边距，从根源删掉占位空间。
• 推荐给ul加gap属性控制列表项之间的间距，比给li设margin更稳定，不会出现外边距重叠问题。
• 给.button类追加display: inline-block;、text-decoration: none;属性：前者可以让内联元素<a>的内边距、圆角渲染更符合按钮预期，后者去掉链接默认的下划线，样式更统一。
• 你当前给li设置的30px内边距+点状边框会在按钮外层多套一圈带边距的虚线框，要是不需要这个效果，可以把li的padding设为0，或者直接把边框样式迁移到.button类上，避免双层边框的冗余效果。

CSS部分 #

ul {
  display: flex;
  list-style-type: none;
  /* 清除默认列表边距 */
  padding: 0;
  margin: 0;
  /* 统一控制列表项间距 */
  gap: 1em;
}

li {
  /* 按需调整，不需要li额外占位就设为0 */
  padding: 0;
  border: 0.05em dotted #35b8b1;
}

.button {
  /* 让a标签作为块级按钮渲染 */
  display: inline-block;
  border: 1px solid #ffffff;
  border-radius: 50%;
  padding: 10px;
  /* 去掉链接默认下划线 */
  text-decoration: none;
  color: inherit;
}

HTML部分 #

<nav>
  <ul>
    <li><a class="button" href="#HTML">HTML</a></li>
    <li><a class="button" href="#CSS">CSS</a></li>
    <li><a class="button" href="#JS">JS</a></li>
  </ul>
</nav>

内容的提问来源于stack exchange，提问作者GetMoosed