缩进是一种简单的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")。项目符号与段落对齐,没有悬垂。