現(xiàn)象
在做HB5800開發(fā)時，想在二級列表中嵌入九宮格來做索引肿嘲。然而融击，直接在二級列表中嵌入九宮格后，效果很不理想雳窟，在九宮格的最右側(cè)有一條空白尊浪，很難看，就像下圖中紅色的框一樣涩拙！
二級列表中嵌入九宮格
這樣的效果實在是難以接受的际长。默認代碼如下：
<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發(fā)現(xiàn)MUI在列表項li中的類mui-table-view-cell設(shè)置了padding:11px 15px;這就導(dǎo)致了九宮格右側(cè)出現(xiàn)了白條
解決方案
1、若是在li中加入內(nèi)聯(lián)樣式style="padding-left:0px; padding-right: 0px;"兴泥，白條依然出現(xiàn)，且會導(dǎo)致列表出現(xiàn)混亂虾宇，但是白條變小了!如下：
2搓彻、在上一條的基礎(chǔ)上繼續(xù)查找原因，發(fā)現(xiàn)類
.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的干擾，效果還不錯搪泳，至少右側(cè)的白條不見了稀轨，如下圖：
仔細觀察會發(fā)現(xiàn)列表的標題就剩一半了，這個有點尷尬岸军，趕緊查找原因奋刽。發(fā)現(xiàn)還是margin的問題
3瓦侮、繼續(xù)修改，在a標簽上添加樣式style="padding-left: 30px;margin-right:0px;",抵消了兩側(cè)的margin-15px及所帶來的干擾
這回效果還可以佣谐，暫時小滿足~
說明：
- a標簽上左側(cè)為什么不用margin-left:15px來抵消肚吏，因為當怎么設(shè)置時，在點擊列表時狭魂，會發(fā)現(xiàn)按鈕的左側(cè)有一片空白罚攀，這樣很丑，所以放棄了該方法雌澄。
- 為什么左側(cè)是30px而不是15px斋泄，因為標題內(nèi)容距離左側(cè)還有15px距離，如果直接設(shè)置
padding-left: 15px;镐牺，則標題會緊貼左側(cè)炫掐，與其他的列表樣式不符。
代碼：
<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更新
后期調(diào)試發(fā)現(xiàn)采用更加簡單的方式也能實現(xiàn)上述目的片习，即在九宮格的ul外面用div包裹唐全，病增加個style="margin-right:-30px;";
對于九宮格下邊框的問題罢猪，則需增加如下css代碼：
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{
background-color:transparent;
}
