设置list-style-type:none后li仍留空白，下拉列表如何解决？

当你设置li { list-style-type: none; }后仍有空白，是因为默认情况下<ul>或<ol>容器自带左内边距（padding-left）来容纳项目符号，即使符号被隐藏，这个内边距依然存在。以下是几种可行的解决方法：

• 重置列表容器的左内边距
  直接给列表容器设置padding-left: 0;，彻底消除预留的符号空间：

  ul {
    padding-left: 0;
  }
  li {
    list-style-type: none;
  }
  

• 调整项目符号的位置
  给<li>设置list-style-position: inside;，让项目符号（即使隐藏）的位置从容器外部移到内部，避免外部留白：

  li {
    list-style-type: none;
    list-style-position: inside;
  }
  

  注意：这种方法可能会让列表项的文本排版稍有变化，需要根据实际布局调整。

• 使用简写属性一次性处理
  list-style: none;是list-style-type和list-style-position的简写，配合容器内边距重置可以一步到位：

  ul {
    padding-left: 0;
  }
  li {
    list-style: none;
  }
  

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