html-Element vertikal stapeln

Question

Wie kann ich die Überlappung der li-Elemente vermeiden, wenn sie wie unten in CSS gedreht gedreht werden?

.nav-tabs-left{ 
 
    list-style-type: none; 
 
    float: left; 
 
    margin-left: 0px; 
 
} 
 
.nav-tabs-left li{ 
 
    transform: rotate(90deg); 
 
}

<ul class="nav-tabs-left" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><span>Settings</span></a></li> 
 
</ul>

Ausgang

Answer 1

Anstelle von CSS-Transformationen sollten Sie in writing-mode suchen.

Die Schreibmodus-Eigenschaft legt fest, ob Textzeilen horizontal oder vertikal angeordnet werden und in welche Richtung die Blöcke fortschreiten.

IE8 does not support 2D transformiert, während partial support für Schreib-Modus ist.

Die globale Unterstützung für writing-mode beträgt 91,85% und das ist wirklich gut.

.section-title { 
    writing-mode: vertical-lr; 
} 

Source - CSS Writing Mode

---

Codepen demo

Answer 2

display: inline-block; hinzufügen und eine Breite Definition .nav-tabs-left li wie

.nav-tabs-left li { 
    display: inline-block; 
    width: 20px; 
    transform: rotate(90deg); 
} 

Heres ein Codepen: http://codepen.io/anon/pen/pEAEZJ