mui-table-view>mui-table-view-cell一般使用在ul>li嵌套关系,并且会在li下生成下划线
<!--一般列表使用mui-table-view>mui-table-view-cell嵌套关系 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>
<div class="mui-content">
<!--mui-content 除顶部 底部内容外建议其他部分使用mui-content包裹 会在上下预留空位 -->
<div class="mui-card">
<!--mui-content 左右留出空位 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1111</a>
<!--mui-navigate-right用于li>a 作为导航箭头 -->
<div class="mui-collapse-content mui-table-view-cell">
<!-- mui-collapse-content为下拉内容与 mui-collapse配合使用 -->
<!-- 加了mui-table-view-cell 子面板当前列就有下划线啦 -->
<p>面板1子内容1</p>
</div>
<div class="mui-collapse-content">
<p>面板1子内容2</p>
</div>
<div class="mui-collapse-content">
<p>面板1子内容2</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板2</a>
<div class="mui-collapse-content">
<p>面板2子内容</p>
</div>
</li>
</ul>
</div>
</div>
这就是加了mui-content mui-card的样子 左右会预留边缘