纯css实现左右滑动(-webkit-box使用)


<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>纯css实现左右滑动title>
	<style type="text/css"> ul, li { list-style: none; } .slide-box { margin-top: 50px; 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">1li>
		<li class="slide-item">2li>
		<li class="slide-item">3li>
		<li class="slide-item">4li>
		<li class="slide-item">5li>
	ul>
	<p>测试文字,左右滚动时,这里不会动p>
body>

html>

你可能感兴趣的:(CSS)