垂直叠加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。

写入模式属性定义文本行是水平的还是垂直的，以及阻止进度的方向。

IE8 不支持 2D转换，而写模式有部分支撑。

全球对writing-mode的支持是91.85%，这是非常好的。

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

源- CSS写作模式

Codepen演示

Answer 2

将display: inline-block;和宽度定义添加到.nav-tabs-left li中，如

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

下面是一个代码库：http://codepen.io/anon/pen/pEAEZJ