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タブコンポーネントの幅を 100% に設定します。
• .layui-tab-titletableタブ タイトル コンテナを幅 100% に設定し、フィールド幅に固定テーブル レイアウトを使用するように表示モードを設定します。
• .layui-tab-title li各タブヘッダー項目の幅を「自動」に設定し、table-cellデフォルトの代わりにプロパティを使用します。block
• .layui-tab-title li:last-child余分な 1 ピクセルのスペースを避けるために、最後のタブ項目の右の境界線を削除します。

---

@リークタイムも時々あります