296

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

4

9 回答 9

477

将列表样式和左填充设置为空。

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: nonewith 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>

于 2012-12-18T18:25:06.643 回答
103

我首选的删除 <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; }
于 2014-10-06T09:57:54.003 回答
10

display:table-row;也将摆脱压痕，但会移除子弹。

于 2015-08-13T08:45:03.020 回答
8

将此添加到您的 CSS 中：

ul { list-style-position: inside; }

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

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

于 2014-07-02T16:11:35.160 回答
7

删除填充：

padding-left: 0;
于 2012-12-18T18:17:12.750 回答
4

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

padding:0!important;

于 2012-12-18T18:16:36.707 回答
4

I have the same problem with a footer I'm trying to divide up. I found that this worked for me by trying few of above suggestions combined:

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

This seems to keep it to the left under my h1 and the bullet points inside the div rather than outside to the left.

于 2015-01-28T20:50:44.453 回答
4

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

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

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

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

于 2017-05-03T14:37:30.047 回答
2

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

于 2019-01-20T03:52:37.970 回答