HTML源代码
<div class="layui-card"> <div class="layui-card-header">卡片风格</div> <div class="layui-card-body"> <div class="layui-tab layui-tab-card"> <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">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div> <div class="layui-tab-item">2</div> </div> </div> </div> </div> </div>
调整CSS实现自适应
要让layui-tab-title中li的宽度平均铺满屏幕，可以使用以下CSS：
.layui-tab { width: 100%; } .layui-tab-title { display: table; width: 100%; table-layout: fixed; margin-bottom: 0; } .layui-tab-title li { display: table-cell; width: auto; height: 38px; line-height: 38px; text-align: center; background-color: #f5f5f5; font-size: 14px; padding: 0 15px; border-right: 1px solid #e6e6e6; } .layui-tab-title li:last-child { border-right: none; }
CSS的解释如下：
.layui-tab 设置Tab组件宽度为100%
.layui-tab-title 设置Tab标题容器为100%的宽度，并将显示方式设置为table，字段宽度使用固定表格布局
.layui-tab-title li 设置每个Tab标题项的宽度为“自动”，并使用table-cell属性，而不是默认的block
.layui-tab-title li:last-child 去掉最后一个Tab Item的右边框以避免多出一个1px的空白
@漏刻有时
