现象
在做HB5800开发时，想在二级列表中嵌入九宫格来做索引。然而，直接在二级列表中嵌入九宫格后，效果很不理想，在九宫格的最右侧有一条空白，很难看，就像下图中红色的框一样！
二级列表中嵌入九宫格
这样的效果实在是难以接受的。默认代码如下：
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active mui-unfold">
<a class="mui-navigate-right">
嵌入九宫格
</a>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--</div>-->
</li>
</ul>
分析原因
通过查看CSS发现MUI在列表项li中的类mui-table-view-cell设置了padding:11px 15px;这就导致了九宫格右侧出现了白条
解决方案
1、若是在li中加入内联样式style="padding-left:0px; padding-right: 0px;"，白条依然出现，且会导致列表出现混乱，但是白条变小了!如下：
2、在上一条的基础上继续查找原因，发现类
.mui-table-view-cell.mui-collapse .mui-table-view存在样式margin-right:15px;margin-left:15px;，所以为了抵消这个样式说带来的问题，在9宫格的ul上添加样式style="margin-left: 0px;margin-right: 0px;"消除margin的干扰，效果还不错，至少右侧的白条不见了，如下图：
仔细观察会发现列表的标题就剩一半了，这个有点尴尬，赶紧查找原因。发现还是margin的问题
3、继续修改，在a标签上添加样式style="padding-left: 30px;margin-right:0px;",抵消了两侧的margin-15px及所带来的干扰
这回效果还可以，暂时小满足~
说明：
- a标签上左侧为什么不用margin-left:15px来抵消，因为当怎么设置时，在点击列表时，会发现按钮的左侧有一片空白，这样很丑，所以放弃了该方法。
- 为什么左侧是30px而不是15px，因为标题内容距离左侧还有15px距离，如果直接设置
padding-left: 15px;，则标题会紧贴左侧，与其他的列表样式不符。
代码：
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active mui-unfold" style="padding-left: 0px; padding-right: 0px;">
<a class="mui-navigate-right" style="padding-left: 30px;margin-right:0px;">
嵌入九宫格
</a>
<ul class="mui-table-view mui-grid-view mui-grid-9" style="margin-left: 0px;margin-right: 0px;">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!--</div>-->
</li>
<li class="mui-table-view-cell mui-collapse mui-active mui-unfold">
<a href="#" class="mui-navigate-right">
item2
</a>
</li>
</ul>
遗留问题
- 9宫格的下边框只有一半多点，这个怎么修改？
2017.1.12更新
后期调试发现采用更加简单的方式也能实现上述目的，即在九宫格的ul外面用div包裹，病增加个style="margin-right:-30px;";
对于九宫格下边框的问题，则需增加如下css代码：
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{
background-color:transparent;
}
网友评论