mui下拉面板布局 (mui-content,mui-card,mui-table-view,mui-navigate-right)

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的样子 左右会预留边缘

来源：https://blog.csdn.net/crazyo2jam/article/details/99324250