layui框架实战案例(22)：layui-tab-title的宽度自适应的解决方案

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的空白

---

@漏刻有时