stacking html element vertically

Question

Как я могу избежать перекрытия элементов li при повороте, как показано ниже в CSS?

.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>

выход

Answer 1

Вместо использования CSS Transforms вы должны изучить writing-mode.

Свойство режима записи определяет, будут ли строки текста выложены горизонтально или вертикально, а также направление, в котором продвигаются блоки.

IE8 does not support 2D-преобразования, тогда как для режима записи есть partial support.

Глобальная поддержка writing-mode - 91.85%, и это действительно хорошо.

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

Source - CSS Writing Mode

---

Codepen demo

Answer 2

Добавить display: inline-block; и определение ширины к .nav-tabs-left li, как

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

Heres a codepen: http://codepen.io/anon/pen/pEAEZJ