效果圖

image.png

1. html

<div class="slider">
            <div class="slide_son">
                <img src="img/luyou.jpg"/>
                <span class="slide_price">￥450</span><span class="slider_sale">已售123</span>
            </div>
            <div class="slide_son">
                <img src="img/luyou.jpg"/>
                <span class="slide_price">￥450</span><span class="slider_sale">已售123</span>
            </div>
            <div class="slide_son">
                <img src="img/luyou.jpg"/>
                <span class="slide_price">￥450</span><span class="slider_sale">已售123</span>
            </div>
            <div class="slide_son">
                <img src="img/luyou.jpg"/>
                <span class="slide_price">￥450</span><span class="slider_sale">已售123</span>
            </div>
            <div class="slide_son">
                <img src="img/luyou.jpg"/>
                <span class="slide_price">￥450</span><span class="slider_sale">已售123</span>
            </div>
            <div class="slide_son">
                <img src="img/luyou.jpg"/>
                <span class="slide_price">￥450</span><span class="slider_sale">已售123</span>
            </div>
        </div>

2.css

.slider{
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
}
.slider::-webkit-scrollbar {
    display: none; /*不展示橫向滾動條*/
}
.slide_son{
    width: 115px;
    height: 140px;
    display: inline-block;
}
.slide_son img{
    width: 110px;
    height: 110px;
    margin-left: 5px;
    display: block;
}
.slide_price{
    color: red;
    font-size: 15px;
    line-height: 30px;
    height: 30px;
    margin-left: 5px;
}
.slider_sale{
    color: #C4C4C4;
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    margin-right: 5px;
    float: right;
}