横向滚动文字加图片

原创于 2018-07-10 21:34:39 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

随记专栏收录该内容

100 篇文章

订阅专栏

<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%;
}