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

小开

你能提供一个链接吗? 谢谢我可以看看很可能你的css选择器不够强大，或者你可以试试

padding:0!important;

小开

去除衬垫:

padding-left: 0;

小开

最佳答案

设置列表样式和左填充为空。

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-position: inside或缩写list-style: inside替换list-style: none:

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>

小开

添加到你的CSS:

ul { list-style-position: inside; }

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

裁判:http://www.w3schools.com/cssref/pr_list-style-position.asp

小开

我首选的解决方案，以删除<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>元素内的文本块绕行成多行，则它们将保持正确的缩进。

< p > 遗留的信息: < br > 对于IE版本8及以下，你必须使用margin-left:

    ul { margin-left: 1.2em; }

小开

我也有同样的问题与脚注，我试图划分。我发现这对我很有效，尝试了上面的一些建议:

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

这似乎使它在我的h1和div内的项目符号左边，而不是外面的左边。

小开

display:table-row;也将消除缩进，但将删除子弹。

小开

现场演示: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")。项目符号与段落对齐，没有突出。