如何从无序列表项中删除缩进?
我想从ul
删除所有缩进。 我尝试将margin
, padding
, text-indent
为0
,但无济于事。 似乎将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