Linke Ausrichtungsnummer von Un geordneter Liste

Question

Ich spiele mit UN-geordneter Liste in HTML herum und fragte mich, ob folgende Anzeige auf dynamisch erzeugtem ul s möglich ist.

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

So beginne ich mit UL-DIV mit jquery append Funktion anhängen und halte das Hinzufügen von dem Baum Umfang abhängig, sondern führe ich bin immer ist -

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

Gibt es eine Möglichkeit Stern ausrichten zu die linke via CSS?

Answer 1

können Sie position:relative/absolute zusammen mit ::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

verwenden verwenden Sie Elemente Pseudo positioniert absolut anstelle der Standard-Aufzählungszeichen. Ich habe den Unicode-Charakter des Aufzählungszeichens \ u2022 verwendet, aber Sie können verwenden, was auch immer Sie möchten. Hier ein Beispiel: 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>