mui 区域横向滚动 无法滚动显示全部内容的问题

需要做一个横向的区域滚动，按官方的模板，在实际运用中发现横线滚动只能显示部分内容，剩下的滑不动了，找了很久原因，最后发现需要在类 mui-control-item 上自定义宽度就可以了，记录一下。

效果图

 

实现的部分代码：

            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll" >
                  <c:forEach items="${carYard_list }" var="build" varStatus="num">
                    <a class="mui-control-item" style="width: 170px;">
                        <div style="height: 110px;padding:10px 5px;">
                            <div id="div-${num.count }"  class="huizhi-img-box mui-row gcc"  onclick="qiehuan(this,'${marea_bm}','${marea_name }','${num.index}')" style="cursor:pointer;">
                                <div class="mui-col-xs-5 mui-text-center">
                                    <img src="plug-in/mui/images/huizhi_car.png" />
                                </div>
                                <div class="mui-col-xs-7 mui-text-center">
                                    <div class="huizhi-max-title" style="word-wrap: break-word;font-weight: 400;">${build.YARD_NAME }</div>
                                    <div style="font-weight: 400;white-space: normal;text-align: left;font-size: 12px;">${marea_name }</div>
                                </div>
                            </div>
                        </div>
                    </a>
                  </c:forEach> 
                    
                </div>
            </div>

官方横向滚动文档介绍：

横向滚动只需在scroll组件基础上添加mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted这三个class即可.(给子元素添加mui-control-item可加大文字间距增强体验

事例代码：

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <a class="mui-control-item mui-active">
            推荐
        </a>
        <a class="mui-control-item">
            热点
        </a>
        <a class="mui-control-item">
            北京
        </a>
        <a class="mui-control-item">
            社会
        </a>
        <a class="mui-control-item">
            娱乐
        </a>
        <a class="mui-control-item">
            科技
        </a>
    </div>
</div>