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があります。

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); 
} 

のように、 .nav-tabs-left liに display: inline-block;と幅の定義を追加します。

コード：http://codepen.io/anon/pen/pEAEZJ