Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > Example of how to implement left and right sliding using CSS on mobile terminals

Example of how to implement left and right sliding using CSS on mobile terminals

黄舟

Release： 2017-10-27 09:53:16

Original

5699 people have browsed it

Example of how to implement left and right sliding using CSS on the mobile terminal

<!DOCTYPE html>
<html>
<head>
    <title>纯css实现左右滑动</title>
    <style type="text/css">
        ul,li{
                list-style: none;;
        }
        .slide-box{
            margin-top:200px;
            display: -webkit-box;
            overflow-x: auto;
            /*适应苹果*/
            -webkit-overflow-scrolling:touch;
        }
        .slide-item{
            width: 300px;
            height: 300px;
            border:1px solid #ccc;
            margin-right: 30px;
            background: pink;
        }
        /*隐藏掉滚动条*/
        .slide-box::-webkit-scrollbar {
         display: none;
       }
    </style>
</head>
<body>
    <ul class="slide-box">
        <li class="slide-item"></li>
        <li class="slide-item"></li>
        <li class="slide-item"></li>
        <li class="slide-item"></li>
        <li class="slide-item"></li>
    </ul>
</body>
</html>

Copy after login

The above is the detailed content of Example of how to implement left and right sliding using CSS on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css about

source：php.cn

Previous article：Introduction to the difference between :nth-child and :nth-of-type in CSS3 selectors Next article：Summary of the use of selectors in css

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn