html 요소를 세로로 쌓음

Question

아래 CSS와 같이 회전 할 때 li 요소가 겹치지 않게하려면 어떻게해야합니까?

.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 변환을 사용하는 대신 writing-mode을 조사해야합니다.

writing-mode 속성은 텍스트 줄을 가로 또는 세로로 배치할지 또는 블록 진행 방향을 정의할지 정의합니다. 쓰기 모드가 partial support 반면

IE8 does not support 2d는, 변형.

writing-mode에 대한 전세계적인 지원은 91.85 %이며 이것은 정말로 좋습니다.

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

Source - CSS Writing Mode

---

Codepen demo

Answer 2

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

같이 display: inline-block; 및 .nav-tabs-left li에 폭 정의를 추가

코드 : http://codepen.io/anon/pen/pEAEZJ