javascript - 无序列表的左对齐数

Question

我正在玩弄 HTML 中未排序的列表，想知道在动态生成的 ul 上是否可以进行以下显示。

*    Hello
*        Hi
*        Bi
*    Name
*        Ron
*        Mat
*    Cloth
*        Color
*            Red

所以我开始使用 jquery append 函数将 UL 附加到 DIV 并根据树范围继续添加，但结果我得到是-

    *Hello
        *Hi
        *Bi
    *Name
        *Ron
        *Mat
    *Cloth
        *Color
            *Red 

有没有办法通过 CSS 将星星向左对齐？

Answer 1

您可以将 position:relative/absolute 与 ::before 一起使用

.ul {
  position: relative;
}
li {
  list-style: none
}
li::before {
  content: "*";
  position: absolute;
  left: 0;
}

<ul class="ul">
  <li>Hello
    <ul>
      <li>li</li>
      <li>bi</li>
    </ul>
  </li>
  <li>Name
    <ul>
      <li>Ron</li>
      <li>Mat</li>
    </ul>
  </li>
  <li>Cloth
    <ul>
      <li>Color
        <ul>
          <li>Red</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>