我想从中删除所有缩进ul
。我试着设置margin
,padding
,text-indent
给0
,却无济于事。似乎设置text-indent
为负数确实可以解决问题-但这真的是消除缩进的唯一方法吗?
我想从中删除所有缩进ul
。我试着设置margin
,padding
,text-indent
给0
,却无济于事。似乎设置text-indent
为负数确实可以解决问题-但这真的是消除缩进的唯一方法吗?
Answers:
将列表样式设置为空,而将左边框保留为空。
ul {
list-style: none;
padding-left: 0;
}
要维护项目符号,可以list-style: none
用 list-style-position: inside
或简写代替list-style: inside
:
ul {
list-style-position: inside;
padding-left: 0;
}
list-style-position: outside; padding-left: 1em;
的<ul>
1em
东西有些不可思议。实际上还剩下一点压痕。
我首选的消除<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>
该解决方案不仅轻巧,而且具有多个优点:
旧版信息:
对于IE 8及更低版本,您必须改用margin-left:
ul { margin-left: 1.2em; }
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
将第二行及随后所有行的文本与项目符号对齐。这当然是不可取的。
你能提供一个链接吗 ?谢谢,我可以看看。很可能您的CSS选择器不够强大,或者您可以尝试
padding:0!important;
!important
是邪恶的
现场演示: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”)。项目符号与段落对齐,没有悬垂。