垂直堆叠html元素

Question

如何在CSS中旋转时如何避免li元素的重叠？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

输出

Answer 1

将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

Answer 2

您应该查看writing-mode。

，而不是使用CSS转换

  

写入模式属性定义文本行是水平放置还是垂直放置以及块进展的方向。

IE8 does not support 2D变换，而写作模式有partial support。

全球对writing-mode的支持率为91.85％，这非常好。

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

Source - CSS Writing Mode

Codepen demo