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

我想从ul删除所有缩进。 我尝试将marginpaddingtext-indent0 ,但无济于事。 似乎将text-indent设置为负数会产生诀窍 - 但这是否真的是删除缩进的唯一方法?


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

ul {
    list-style: none;
    padding-left: 0;
}​

jsFiddle例子

要保持项目符号,您可以使用list-style-position: inside或简写list-style: inside替换list-style: none list-style: inside

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

jsFiddle例子


2018年解决方案是一个简单的CSS单线程:

ul { padding-left: 1.2em; }
<p>A leading line of paragraph text</p>
<ul>
    <li>List item 1</li>
    <li>This long list item shows that multiple lines are indented correctly. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada.</li>
    <li>List item 2</li>
</ul>
<p>A trailing line of paragraph text</p>

添加到您的CSS:

ul { list-style-position: inside; }

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

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

链接地址: http://www.djcxy.com/p/29971.html

上一篇: How to remove indentation from an unordered list item?

下一篇: Why are black dots in my nav? (HTML/CSS)