Question

我想从ul删除所有缩进。我尝试将margin，padding，text-indent设置为0，但无效。似乎将text-indent设置为负数就可以了 - 但这是否真的是删除缩进的唯一方法？

Answer 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>

Answer 2

我删除＆lt; ul＆gt;的首选解决方案缩进是一个简单的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>

此解决方案不仅轻巧，而且具有多种优势：

很好地左对齐＆lt; ul＆gt;的子弹点指向周围的正常段落文本（=删除＆lt; ul＆gt;的缩进）。
＆lt; li＆gt;内的文本块如果元素包裹成多行，则元素保持正确缩进。

传统信息：
对于IE 8及以下版本，您必须使用margin-left代替：

    ul { margin-left: 1.2em; }

Answer 3

将此添加到您的CSS：

ul { list-style-position: inside; }

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

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

Answer 4

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

padding:0!important;

Answer 5

删除填充：

padding-left: 0;

Answer 6

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

Answer 7

我在尝试分割的页脚时遇到了同样的问题。我发现通过尝试以上几点建议，这对我有用：

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

这似乎将它保持在我的h1左下方，而子弹在div内部而不是在左外侧。

Answer 8

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

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

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

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

Answer 9

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

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

9 个答案: