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


260

我想从中删除所有缩进ul。我试着设置marginpaddingtext-indent0,却无济于事。似乎设置text-indent为负数确实可以解决问题-但这真的是消除缩进的唯一方法吗?


在没有HTML和CSS的情况下很难说,但是要使用由规则ul {padding:0; margin:0;}在大多数情况下都能解决问题。我敢肯定,文本缩进与它无关。
贾瓦德

没有看到您的实际操作,很难说出问题所在。将ul上的边距和填充都设置为0应该可以跨浏览器工作。
kinakuta 2012年

6
“没有用。不能使用CSS重置。我的更改是一个庞大的Web框架的一部分,该框架有60多个人在从事此工作。”-确实如此。比您还没有清楚地问过您的问题!
贾瓦德

Answers:


416

将列表样式设置为空,而将左边框保留为空。

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

要维护项目符号,可以list-style: nonelist-style-position: inside或简写代替list-style: inside

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


18
您可以通过以下方式删除缩进并保留编号/项目符号:ul {list-style-position:inside; padding-left:0;}
Myforwik 2014年

4
好了,既然您已经编辑了答案,就可以保留项目符号,但是仍然存在具有多个文本行的<li>不能正确缩进所有行的问题。如果您继续进行编辑,最终可能会得到我的解决方案。:D
Jpsy

第二种解决方案似乎不再起作用(Windows上为Chrome 55)。还有其他选择吗?
汤姆·帕索里克(TomPažourek),

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

1
@ j08691:是的,这是可行的,尽管这1em东西有些不可思议。实际上还剩下一点压痕。
汤姆·帕索里克(TomPažourek),

93

我首选的消除<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; }

我已经在我的帖子@aioobe中解释了所有问题。但这里又是:可接受的答案(截至目前的状态,因为在我最初的帖子中已对其进行多次编辑以改进它的建议)现在保持了项目符号(如果使用给定的第二个示例),但不能正确缩进项目符号多行文本。这是接受的答案的第二个示例的小提琴,经过修改以显示效果:jsfiddle.net/v6nyuq6f/88这是我的方法所纠正的小提琴:jsfiddle.net/v6nyuq6f/89
Jpsy,2015年

因此,到了2016年,依靠“对所有浏览器都不完美”的某些值是解决此常见问题的最干净的解决方案。是否有任何方法可以获取项目符号的确切宽度,也许使用CSS3功能?
2016年

为了安全起见:ul { padding-left:1.2em; margin-left: 0; }
Andrew Murphy

1
此页面上的唯一解决方案,适用于长列表项(正确包装)-谢谢!
FredyWenger




4

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

padding:0!important;


1
指定为0。当不需要尺寸
raam86

11
!important邪恶的
Madbreaks'Dec 10'13

@Madbreaks如果选择器是正确的并且用例正确,但是您的正确概率不是这个,可以使用,也许在这种情况下,有一个主要的CSS规则需要通过更改基础文件来覆盖,因此它留在了像不砍内核一样大头钉吗?我不知道也许我错了
naeluh 2013年

4

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

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

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


3

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

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

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

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


-1

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


除了零之前的负号外,我不明白为什么您不赞成投票。我在Google Chrome上尝试了此方法,但仍有效,而padding-left:0解决方案无效。这是在64位Google Chrome版本79.0.3945.88 WinX上。
MrPotatoHead

在上面添加我的评论...由于无法编辑...我对此进行了更多操作,并且在最新的Firefox(71.0)上,行为相同。但是,这是无序列表(ul)。使用有序列表(ol)时,1.2em似乎使列表的左边缘与其他文本的左边缘对齐(根据上述Jpsy答案)。
MrPotatoHead
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.