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

【问题标题】：How to remove indentation from an unordered list item?如何从无序列表项中删除缩进？
【发布时间】：2012-12-06 00:19:40
【问题描述】：

我想从ul 中删除所有缩进。我尝试将margin、padding、text-indent 设置为0，但无济于事。似乎将 text-indent 设置为负数可以解决问题 - 但这真的是消除缩进的唯一方法吗？

【问题讨论】：

很难说没有您的 HTML 和 CSS，但使用由规则组成的 CSS 重置/规范化 ul{padding: 0; margin: 0;} 在大多数情况下都可以解决问题。我确信 text-indent 与它无关。
没有看到你实际在做什么，很难说问题是什么。将 ul 上的边距和填充都设置为 0 应该可以跨浏览器工作。
“没用。而且不能使用 CSS 重置。我的更改是一个巨大的 Web 框架的一部分，有 60 多人在处理它哈哈” - 确实哈哈。比你没有问清楚你的问题！

标签： html css

【解决方案1】：

将列表样式和左边距设置为空。

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>

【讨论】：

您可以通过以下方式删除缩进并保留编号/项目符号：ul { list-style-position: inside; padding-left: 0;}
好吧，现在您已经编辑了答案，项目符号被保留了，但是仍然存在问题，即具有多个文本行的
不能正确缩进所有行。如果您继续编辑，您最终可能会得到我的解决方案。 :D

第二种保留子弹的解决方案似乎不再起作用（Windows 上的 Chrome 55）。有其他选择吗？

@TomPažourek 在<ul> 上尝试list-style-position: outside; padding-left: 1em;

@j08691：是的，这行得通，虽然1em 的东西有点神奇……而且实际上还剩下一点点缩进。

【解决方案2】：

我首选的去除

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>

此方案不仅轻量，而且具有多重优势：

它很好地将
如果
元素中的文本块环绕成多行，它们将保持正确缩进。

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

    ul { margin-left: 1.2em; }

【讨论】：

我已经在我的帖子中解释了所有问题，@aioobe。但又在这里：接受的答案（截至目前的状态，因为在我的原始发布之后它已被多次编辑以改进它）现在维护项目符号（如果您使用给出的第二个示例），但它没有正确缩进项目符号多行文本。这是已接受答案的第二个示例的小提琴，已修改以显示效果：jsfiddle.net/v6nyuq6f/88 这是用我的方法更正的相同小提琴：jsfiddle.net/v6nyuq6f/89
所以现在是 2016 年，依靠一些“不适合所有浏览器”的值是解决这个非常常见问题的最干净的解决方案。有没有办法获得项目符号的确切宽度，也许使用 CSS3 功能？
为了安全起见：ul { padding-left:1.2em; margin-left: 0; }
此页面上唯一的解决方案，它适用于长列表项（正确环绕） - 谢谢！

【解决方案3】：

display:table-row; 也会消除缩进，但会移除子弹。

【讨论】：

【解决方案4】：

将此添加到您的 CSS：

ul { list-style-position: inside; }

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

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

【讨论】：

在具有多行文本的
上，list-style-position: inside 将第二行和所有后续行的文本与项目符号对齐。这肯定是不可取的。

【解决方案5】：

删除填充：

padding-left: 0;

【讨论】：

【解决方案6】：

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

padding:0!important;

【讨论】：

指定 0 时不需要维度。
!important 是 邪恶的
@Madbreaks 如果选择器是正确的并且用例是正确的，但你的权利可能不是这个，它可以工作，也许在这种情况下，有一个主要的 css 规则需要被更改覆盖基本文件，所以它就像不破解核心一样保持不变？我不知道也许我错了

【解决方案7】：

现场演示：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: "●";
}

由于最初的问题不清楚其要求，我试图在其他答案设定的指导方针内解决这个问题。特别是：

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

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

【讨论】：

【解决方案8】：

我在尝试拆分页脚时遇到了同样的问题。通过尝试结合上述几个建议，我发现这对我有用：

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

这似乎使它保持在我的 h1 下方的左侧，并且项目符号指向 div 内部而不是左侧。

【讨论】：

【解决方案9】：

内联执行此操作，我将边距设置为 0 (ul style="margin:0px")。项目符号与段落对齐，没有悬垂。

【讨论】：

除了零前面的负号之外，我不明白为什么你被否决了。我在谷歌浏览器上试过这个并且它有效，而 padding-left: 0 解决方案没有。这是在 Google Chrome 版本 79.0.3945.88 WinX，64 位上。
添加到我上面的评论中......因为我无法编辑它......我玩了更多，在最新的 Firefox (71.0) 上，行为是相同的。但是，这是使用无序列表 (ul)。使用有序列表 (ol) 时，1.2em 似乎将列表的左边缘与其他文本的左边距对齐（根据上面的 Jpsy 答案）。