Question

我正在使用HTML中的UN排序列表，并且想知道是否可以在动态生成的ul上显示以下内容。

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

所以我首先使用jquery UL函数将DIV附加到append并继续添加，具体取决于树范围，但我得到的结果是 -

    *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>

Answer 2

您使用绝对定位的伪元素代替标准项目符号点。我使用了子弹点\ u2022的unicode字符，但你可以使用任何想要的东西。这是一个例子： https://jsfiddle.net/t65krsou/

＆＃13;

ul{
  list-style: none;
}

#mainList{
  position: relative;
}


li:before{
  content: "\2022";
  position: absolute;
  left: 0;
}

＆＃13;

<ul id="mainList">
  <li>
  hi
  <ul>
    <li>hi again</li>
  </ul>
  </li>
  <li>
  sup
    <ul>
      <li>yo</li>
    </ul>
  </li>
  <li>
  another!
    <ul>
      <li>I can do this</li>
      <li>all day!
      <ul>
        <li>see?</li>
      </ul>
      </li>
    </ul>
  </li>
  
</ul>

＆＃13;

左对齐Un Un ordered List的数量

2 个答案: