Ul li mit Geschossen mit ": before" - Einrückung der zweiten Textzeile

Question

Ich habe eine Liste mit bis zu vier Unterebenen. Kugeln werden gemacht mit: vorher. Ich habe Probleme, die zweite Textzeile mit der ersten zu verbinden.

habe ich versucht Einstellung Polsterung und text-indent wie folgt aus:

ul { 
    padding-left: 1em; 
    text-indent: -1em; 
} 

- aber es funktioniert nicht. Einstellung list-style-position: outside scheint nicht zu funktionieren.

JSFIDDLE hier

Irgendwelche Ideen?

Answer 1

Es ist besser position: absolute anstelle von float zu verwenden, um Kugeln auszurichten.

.menu { 
 
    width: 250px; 
 
} 
 
ul.nav>li>a { 
 
    position: relative; 
 
} 
 
/* First level */ 
 
ul.nav>li>a:before { 
 
    position: absolute; 
 
    font-family: 'Glyphicons Halflings'; 
 
    font-size: 7px; 
 
    color: #901a1e; 
 
    content: "\e080"; 
 
    border: 1px solid #d7d7d7; 
 
    left: 0; 
 
    top: 13px; 
 
} 
 
/* Sub levels */ 
 
ul.nav>li ul li>a { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding-left: 10px; 
 
    position: relative; 
 
} 
 
ul.nav>li ul li>a:before { 
 
    position: absolute; 
 
    font-size: 9px; 
 
    color: #901a1e; 
 
    content: "\25A0"; 
 
    left: 0; 
 
    top: 3px; 
 
} 
 

 
ul li { 
 
    list-style-type: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="menu"> 
 
    <ul class="nav"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Sub menu here</a> 
 
     <ul> 
 
     <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li> 
 
     <li class="active"><a href="#">Link 2.2 - active</a></li> 
 
     <li><a href="#">Link 2.3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    <li><a href="#">Separated link</a> 
 
     <ul> 
 
     <li><a href="#">Link 2.1</a> 
 
      <ul> 
 
      <li><a href="#">Link 3.1</a></li> 
 
      <li><a href="#">Link 3.2</a></li> 
 
      <li><a href="#">Link 3.3</a> 
 
       <ul> 
 
       <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li> 
 
       <li><a href="#">Link 4.2</a></li> 
 
       <li><a href="#">Link 4.3</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">One more very, very, very, long separated link</a></li> 
 
    <li><a href="#">One more separated link</a></li> 
 
    </ul> 
 
</div>

Answer 2

die gleiche line-height auf :before wie auf dem a Element verwenden

Schnipsel siehe:

.menu { 
 
    width: 250px; 
 
} 
 
/* First level */ 
 
ul.nav>li>a:before { 
 
    float: left; 
 
    margin: 3px 6px 4px 0; 
 
    font-family: 'Glyphicons Halflings'; 
 
    font-size: 7px; 
 
    color: #901a1e; 
 
    content: "\e080"; 
 
    border: 1px solid #d7d7d7; 
 
    
 
} 
 
/* Sub levels */ 
 
ul.nav>li ul li>a:before { 
 
    float: left; 
 
    margin-right: 6px; 
 
    font-size: 9px; 
 
    color: #901a1e; 
 
    content: "\25A0"; 
 
    line-height:16px; 
 
} 
 

 
ul li { 
 
    list-style-type: none; 
 

 
} 
 
ul li a { 
 
    line-height:16px; 
 
}

<div class="menu"> 
 
    <ul class="nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Sub menu here</a> 
 
      <ul> 
 
       <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li> 
 
       <li class="active"><a href="#">Link 2.2 - active</a></li> 
 
       <li><a href="#">Link 2.3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Separated link</a> 
 
     </li> 
 
     <li><a href="#">Separated link</a> 
 
      <ul> 
 
       <li><a href="#">Link 2.1</a> 
 
        <ul> 
 
         <li><a href="#">Link 3.1</a></li> 
 
         <li><a href="#">Link 3.2</a></li> 
 
         <li><a href="#">Link 3.3</a> 
 
          <ul> 
 
           <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li> 
 
           <li><a href="#">Link 4.2</a></li> 
 
           <li><a href="#">Link 4.3</a></li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">One more very, very, very, long separated link</a></li> 
 
     <li><a href="#">One more separated link</a></li> 
 
    </ul> 
 
</div>

Answer 3

Im Folgenden Code sollte funktionieren:

.menu { 
 
    width: 250px; 
 
} 
 

 
ul{ 
 
    list-style:none; 
 
} 
 

 
/* Setting the position of <a> and a:before*/ 
 
ul.nav li a{ 
 
    position:relative; /* Setting this to relative so that we position a:before absolute to <a> */ 
 
    padding-left:10px; /* We are moving the text to right by 10px */ 
 
    display:block; 
 
} 
 

 
ul.nav li a:before{ 
 
position:absolute; /* This is the main css rule which gets our desired result */ 
 
left:-5px; /* setting the left position */ 
 
top:4px; /* setting the top position */ 
 
} 
 

 
/* Setting Styles of <li> */ 
 

 
ul.nav>li>a:before { 
 
    
 
    font-family: 'Glyphicons Halflings'; 
 
    font-size: 7px; 
 
    color: #901a1e; 
 
    content: "\e080"; 
 
    border: 1px solid #d7d7d7; 
 
} 
 

 
ul.nav>li ul li>a:before { 
 
    font-size: 9px; 
 
    color: #901a1e; 
 
    content: "\25A0"; 
 
}

<div class="menu"> 
 
    <ul class="nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Sub menu here</a> 
 
      <ul> 
 
       <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li> 
 
       <li class="active"><a href="#">Link 2.2 - active</a></li> 
 
       <li><a href="#">Link 2.3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Separated link</a> 
 
     </li> 
 
     <li><a href="#">Separated link</a> 
 
      <ul> 
 
       <li><a href="#">Link 2.1</a> 
 
        <ul> 
 
         <li><a href="#">Link 3.1</a></li> 
 
         <li><a href="#">Link 3.2</a></li> 
 
         <li><a href="#">Link 3.3</a> 
 
          <ul> 
 
           <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li> 
 
           <li><a href="#">Link 4.2</a></li> 
 
           <li><a href="#">Link 4.3</a></li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">One more very, very, very, long separated link</a></li> 
 
     <li><a href="#">One more separated link</a></li> 
 
    </ul> 
 
</div>