缩进是一种简单的CSS单行代码:

ul { padding-left: 1.2em; }

A leading line of paragraph text

  • Bullet points align with paragraph text above.
  • 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.
  • List item 3

A trailing line of paragraph text

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

很好地向左对齐

的项目符号指向周围的普通段落文本(=

去除)。

内的文字区块

如果元素绕成多行,它们将保持正确的缩进。

旧版资讯:

对于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; }

将此添加到您的CSS:

ul { list-style-position: inside; }

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

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

带有多行文本,list-style-position: inside将第二行及随后所有行的文本与项目符号对齐。这肯定是不可取的。

display:table-row;也将消除缩进,但会删除项目符号。

删除填充:

padding-left: 0;

你能提供一个链接吗 ?

谢谢

我可以看看

您的CSS选择器很可能不够强大,或者您可以尝试

padding:0!important;

指定0时不需要尺寸。

!important为EVIL

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

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

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

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

现场演示:

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")。项目符号与段落对齐,没有悬垂。