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排序列表的左對齊數

回答

相關問題