記事特集学ぶダウンロードに質問プログラミング辞典ゲーム最近の更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

モバイル端末でCSSを利用した左右スライド実装例

黄舟

リリース： 2017-10-27 09:53:16

オリジナル

5667 人が閲覧しました

モバイル端末でCSSを利用した左右スライド実装例

<!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>

ログイン後にコピー

以上がモバイル端末でCSSを利用した左右スライド実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。