<div class="per-son">
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<ul>
<li>
<img src="images/touxing.png" />
<p>1室</p>
</li>
<li>
<img src="images/touxing.png" />
<p>1室</p>
</li>
</ul>
</div>
</div>
</div>
横向图片只显示一半，须将mui-segmented-control-inverted该div设置一定的高度，以及mui-scroll top设置0即可
另外一个需要注意的是，横向滚动里的li必须要设置为display: inline-block;写浮动是没有效果的。必须同时引入mui的css和js，才会生效
css样式：
/* 横向滑动的头部 */
.per-son .mui-segmented-control-inverted{
height: 1.2rem;
}
.per-son .mui-segmented-control-inverted .mui-scroll{
top: 0;
height: 0;
}
.per-son .mui-segmented-control-inverted .mui-scroll li{
display: inline-block;
width: 1rem;
}
.per-son .mui-segmented-control-inverted .mui-scroll li img{
width: 100%;
}
文章来源: 横向滚动文字加图片