移动端-横向滚动/滑动 css样式

移动端-横向滚动css代码

html:

    <ul>
        <li>	//内容部分
            <div>
                <p>按时大大大阿斯蒂芬反复放</p>
                <p>按时大大大阿斯蒂芬反复放</p>
            </div>
        </li>
        <li></li>
        <li></li>...
    </ul>

列表样式:

        ul {
    
    
            white-space: nowrap;	//让行内块格式的li在一行排列,不换行
            font-size: 0;			//避免li行内块间的间距
            overflow-x: auto;		//横向滚动
        }

li样式:

        li {
    
    
            font-size: 16px;		//正常设置
            display: inline-block;	//转成行内块
        }

IOS端会有滚动条,可清除:

 		::-webkit-scrollbar {
    
    
            display: none;
        }

猜你喜欢

转载自blog.csdn.net/cxllRNGNB/article/details/103609666