Un排序列表的左对齐数

我正在玩HTML中的UN-ordered列表，并想知道下面的显示是否可以在动态生成的ul s上运行。Un排序列表的左对齐数

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

所以我开始追加UL到DIV与jQuery append功能，并保持取决于树范围增加，但导致我得到是 -

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

有没有对准明星的方式通过CSS左？

来源

2016-08-02 NewBee

不是花哨的解决方案，但你可以在同一水平，而不是嵌套与缩进'' 有https://jsfiddle.net/yuriy636/他们jougr6cz/1/ – yuriy636

你可以沿着使用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>

来源

2016-08-02 23:35:03 dippas

没有李，这些所有元素都是ul的。此解决方案仅适用于ul吗？ – NewBee

我现在不在电脑上，所以我无法更新我的答案，但是是有效的。只要记住，你不能有一个ul作为另一个ul的直接孩子。你必须像我使用的一样使用li。 – dippas

好吧，让我检查 – NewBee

您使用绝对到位的标准要点的定位伪元素。我使用了bullet point \ u2022的unicode字符，但是你可以使用任何想要的。这里有一个例子： https://jsfiddle.net/t65krsou/

ul{ 
 
    list-style: none; 
 
} 
 

 
#mainList{ 
 
    position: relative; 
 
} 
 

 

 
li:before{ 
 
    content: "\2022"; 
 
    position: absolute; 
 
    left: 0; 
 
}

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

来源

2016-08-02 23:36:19 Pat

没有李，这些所有元素都是ul的。此解决方案仅适用于ul吗？ – NewBee

Un排序列表的左对齐数

回答

相关问题