CSS - 缩进列表项

问题描述

有没有一种方法可以使用CSS缩进每个列表项？

所以一个正常的列表：

 < 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 - 缩进列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！