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

html CSS

Gil伽罗小宇宙

2020-03-24

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

第3596篇《如何从无序列表项中删除缩进?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
伽罗MandyTony 2020.03.24

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

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

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

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

伽罗蛋蛋 2020.03.24

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

神乐 2020.03.24

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

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

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

2020.03.24

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

JinJin小胖 2020.03.24

将此添加到您的CSS:

ul { list-style-position: inside; }

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

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

LGil 2020.03.24

删除填充:

padding-left: 0;
小胖Gil 2020.03.24

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

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

padding:0!important;

小宇宙 2020.03.24

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

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: nonelist-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>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android