Maison > Article > interface Web > Exemple de mise en œuvre du glissement gauche et droit à l'aide de CSS sur les terminaux mobiles
Exemple de mise en œuvre du glissement gauche et droit à l'aide de CSS sur les terminaux mobiles
- 黄舟original
- 2017-10-27 09:53:165630parcourir
Exemple de comment implémenter le glissement vers la gauche et la droite à l'aide de CSS sur un terminal mobile
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn