How to remove indentation from an unordered list item?

I want to remove all indentation from ul . I tried setting margin , padding , text-indent to 0 , but no avail. Seems that setting text-indent to a negative number does the trick - but is that really the only way to remove the indentation?

---

Set the list style and left padding to nothing.

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

jsFiddle example

To maintain the bullets you can replace the list-style: none with list-style-position: inside or the shorthand list-style: inside :

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

jsFiddle example

---

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>

---

Add this to your CSS:

ul { list-style-position: inside; }

This will place the li elements in the same indent as other paragraphs and text.

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

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

上一篇: 从无序列表<ul>中删除“项目符号”

下一篇: 如何从无序列表项中删除缩进？