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

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

.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;
}