CSS - Indent list items

问题

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

回答1:

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: 29px;
   border: 1px solid transparent;
   margin-top: -.1em;
   color: green;
}

<ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>

回答2:

If you have a lot of list-items,then the answer given by @Banzay is cleaner, but if you just have few of them, you can use nth-child for that

li:first-child {
  margin-left: 10px
}
li:nth-child(2) {
  margin-left: 20px
}
li:nth-child(3) {
  margin-left: 30px
}
li:nth-child(4) {
  margin-left: 40px
}
/*just demo*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

来源：https://stackoverflow.com/questions/41632839/css-indent-list-items

标签

html

css

html-lists