CSS - 缩进列表项 [英] CSS - Indent list items
问题描述
所以一个正常的列表:
< UL>
< li> One< / li>
< li>两个< / li>
< li>三< / li>
< li>四个< / li>
< / ul>
显示如下:
一个
两个
三个
四个
在这里您可以使用:before
具有透明边框的伪元素。
您可以通过改变伪元素的宽度来改变列表项的缩进。
除此之外,如果设置 list-style:none;
并设置 color
,则可以更改列表标记 content
编辑:
已移除 display:block
和 color:transparent
和已用空格字符 \00a0
作为内容。
li:before {float:left;内容:\00a0; width:20px; border:1px solid transparent;}
< ul> <李 - 酮< /锂> <李>二< /锂> <李>三< /锂> < li> Four< / li>< / ul>
$ b
下面的一个对于更改后的列表标记稍微复杂一些(根据@dippas的建议删除了 display:block
,但是 border-top
code> border 由于某种原因不起作用)
$ b
ul {list-style:none; counter-reset:cnt;} li:before {float:left;反增量:cnt;内容:counter(cnt)\25b6;最大高度:100%;宽度:25px;边框:1px实心透明; margin-top:-.2em; color:green;}
< ul> <李 - 酮< /锂> <李>二< /锂> <李>三< /锂> <李>四< /锂> < / ul>
Is there a way to indent each list-item using CSS?
So a normal list:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Displays like so:
One
Two
Three
Four
Here you can use :before
pseudo-element with transparent border.
You can variate indent of list item by changing a width of pseudo-element.
Along with that you can change list marker if set list-style: none;
and set color
of content
EDIT:
removed display: block
and color: transparent
and used space character \00a0
as a content.
li:before {
float: left;
content: "\00a0";
width: 20px;
border: 1px solid transparent;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
The following one is little more complex with changed list marker (removed display: block
as advised by @dippas, but border-top
instead border
didn't work for some reason)
ul {
list-style: none;
counter-reset: cnt;
}
li:before {
float: left;
counter-increment: cnt;
content: counter(cnt)" \25b6";
max-height: 100%;
width: 25px;
border: 1px solid transparent;
margin-top: -.2em;
color: green;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
这篇关于CSS - 缩进列表项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!