如何删除 CSS 中不需要的列表缩进？

使用 CSS 删除列表缩进：综合指南

无序列表中不需要的缩进，尤其是换行时，可能会令人沮丧。这是解决此问题的深入解决方案。

在您的示例中，由于使用了 float: left on

而发生缩进。元素。这将创建一个水平填充空间的块级元素。此外，在父容器 #info 上使用边距也可能会导致缩进。

要消除缩进，请实现以下 CSS：

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

此代码会删除任何填充可以存在于

中。元素并隐藏默认列表项目符号。

您之前可能尝试将边距和填充设置为零，但仅此可能还不够。通过将

上的两个属性设置为零，并调整
• 的浮动和宽度属性元素，您可以消除不需要的空间：

  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  结合这些样式更改，您可能需要调整父容器 #info 的边距或位置以实现所需的布局。

  这是 HTML/CSS 的修订版本，其中包含建议的更改：

  <div>
  <pre class="brush:php;toolbar:false">#info {
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF;
    padding: 20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
  }
  
  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  应用这些更改后，不需要的缩进应该消失，将列表项与左边缘对齐。