如何从无序列表项中删除缩进？

现场演示：https : //jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

由于最初的问题尚不清楚其要求，因此我尝试在其他答案确定的指导原则内解决此问题。尤其是：

• 将列表项目符号与外部段落文本对齐
• 在同一列表项中对齐多行

我还想要一种不依赖浏览器就使用多少填充量达成一致的解决方案。为了完整性，我添加了有序列表。

进行内联时，我将边距设置为0（ul style =“ margin：-0px”）。项目符号与段落对齐，没有悬垂。

我尝试分页的页脚也有同样的问题。我发现通过尝试上述建议中的很少几个，这对我很有用：

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

这似乎使它保持在我的h1下方，而div则位于div内，而不是位于左侧。

display:table-row; 也将摆脱缩进，但将删除项目符号。

将此添加到您的CSS：

ul { list-style-position: inside; }

这会将li元素与其他段落和文本缩进相同的位置。

参考：http : //www.w3schools.com/cssref/pr_list-style-position.asp

删除填充：

padding-left: 0;

我首选的消除<ul>缩进的解决方案是一个简单的CSS单行代码：

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

该解决方案不仅轻巧，而且具有多个优点：

• 很好地将<ul>的项目符号点与周围的普通段落文本左对齐（=删除了<ul>的缩进）。
• 如果<li>元素中的文本块环绕成多行，则它们仍将正确缩进。

旧版信息：
对于IE 8及更低版本，您必须改用margin-left：

    ul { margin-left: 1.2em; }

你能提供一个链接吗 ？谢谢，我可以看看。很可能您的CSS选择器不够强大，或者您可以尝试

padding:0!important;

将列表样式设置为空，而将左边框设置为空。

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

要维护项目符号，可以list-style: none用 list-style-position: inside或简写代替list-style: inside：

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>