# 垂直选项卡 ## 5.5.垂直选项卡 只需要在layui-tab的基础上多加一个`layui-tab-vertical`类即可实现： ~~~ <div class="layui-tab layui-tab-vertical"> <ul class="layui-tab-title"> <li class="layui-this">系统管理</li> <li>用户管理</li> <li>权限分配</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> </div> </div> ~~~ 如果要修改选项卡标题的宽度： ~~~ <!-- title和content两处地方都需要修改 --> <div class="layui-tab layui-tab-vertical"> <ul class="layui-tab-title" style="width: 200px;">......省略</ul> <div class="layui-tab-content" style="margin-left: 200px;">......省略</div> </div> ~~~  如果要选项卡的标题在右侧，再多加一个`layui-tab-vertical-right`类即可： ~~~ <div class="layui-tab layui-tab-vertical layui-tab-vertical-right"> <ul class="layui-tab-title" style="width: 200px;">......省略</ul> <div class="layui-tab-content" style="margin-right: 200px;">......省略</div> </div> ~~~  选项卡的灰色分隔线的高度是标题区域的高度，如果当内容高度高于标题区域高度时想要分隔线的高度最大： ~~~ <!-- 多加一个`layui-tab-vertical-full`类就可以了 --> <div class="layui-tab layui-tab-vertical layui-tab-vertical-full"> <ul class="layui-tab-title">......省略</ul> <div class="layui-tab-content">......省略</div> </div> ~~~ 垂直选项卡中使用栅格布局样式错位，在layui-row上加一些样式： ~~~ <div class="layui-tab layui-tab-vertical"> <ul class="layui-tab-title"> <li class="layui-this">系统管理</li> <li>用户管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item"> <div class="layui-row" style="float: left;width: 100%;"> <div class="layui-col-md6"> 内容2 </div> <div class="layui-col-md6"> 内容使用栅格 </div> </div> </div> </div> </div> ~~~