vertikale Bruchlinie eine Inline-Liste

-1

Wie den Text in die Mitte der vertikalen Spannweite?vertikale Bruchlinie eine Inline-Liste

enter image description here

Ich möchte es so aussehen:

enter image description here

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.list-group-item2{ 
 
    border: none; 
 
    list-style: none; 
 
    font-family: 'Adobe Arabic'; 
 
    font-size: 167%; 
 
} 
 
li a{ 
 
    color: #000000; 
 
    background: transparent; 
 
} 
 
li a:hover{ 
 
    text-decoration: none; 
 
    color: #fd5900; 
 
} 
 
.list-group-item2.sep{ 
 
    width: 1px; 
 
    background: url('download.png')left center no-repeat; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-lg-12 hidden-xs text-center"> 
 
     <ul class="list-group2 list-inline"> 
 
     <li class="list-group-item2"> 
 
      <a href="#">آرایشی</a> 
 
     </li> 
 
     <li class="list-group-item2 sep"></li> 
 
     <li class="list-group-item2"> 
 
      <a href="#">رایحه</a> 
 
     </li> 
 
     <li class="list-group-item2 sep"></li> 
 
     <li class="list-group-item2"> 
 
      <a href="#">شست و شو</a> 
 
     </li> 
 
     <li class="list-group-item2 sep"></li> 
 
     <li class="list-group-item2"> 
 
      <a href="#">مو</a> 
 
     </li> 
 
     <li class="list-group-item2 sep"></li> 
 
     <li class="list-group-item2"> 
 
      <a href="#">پوست</a> 
 
     </li> 
 
     <li class="list-group-item2 sep"></li> 
 
     <li class="list-group-item2"> 
 
      <a href="#">آقایان</a> 
 
     </li> 
 
     <li class="list-group-item2 sep"></li> 
 
     <li class="list-group-item2"> 
 
      <a href="#">خانم ها</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-07-06 Behnoosh Mzd

Normalerweise ist dies von 'lineheight' verwaltet wird ... vielleicht können Sie dieses Problem Demo –

seine nicht funktioniert, sowohl Spannweite und Text hatte –

Fragen suchen Code Hilfe geändert müssen Geben Sie den kürzesten Code ein, der zur Reproduktion erforderlich ist ** in der Frage selbst ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css- und-HTML-Code-Schnipsel /). Siehe [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) –

Basierend auf den Beispielen Sie gezeigt haben, es klingt wie Sie haben wollen eine navigationsartige Liste mit einer vertikalen Linie, die jeden Gegenstand aufbricht, somethi ng wie:

item 1 | item 2 | item 3 | item 4

Sie können dies erreichen, mit einer Kombination von Grenzen und :last-of-type die letzte Grenze am Ende der Liste zu entfernen. Sehen Sie im folgenden CodePen zum Beispiel Code:

http://codepen.io/rkieru/pen/JKyYpx

Quelle

2016-07-06 15:39:14

Ja, das hilft sehr, danke sehr :) –

Wenn Sie möchten, dass die Navigation eher zentriert als zentriert ist, müssen Sie möglicherweise Ihren Code anpassen, um sich auf 'flexbox' zu verlassen. –

vertikale Bruchlinie eine Inline-Liste

Antwort

Verwandte Themen