移动端横向滚动条

先上代码

<div class="container ">
			<div class="box">
				<div class="content">

				</div>
				<div class="content">

				</div>
				<div class="content">

				</div>
				<div class="content">

				</div>
				<div class="content">

				</div>
				<div class="content">

				</div>
				<div class="content">

				</div>
				<div class="content">

				</div>
			</div>
		</div>

结构如上

CSS如下

html,body{
	width: 100%;
	height: 100%;
}
.container{
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
}
.box{
	width: 8rem;
	height: 1rem;
}
.content{
	box-sizing: border-box;
	float:left;
	height: 1rem;
	width: 1rem;
	border:1px solid #FF0000;
}

解释一下html,body{width:100%,height:100%}

这个是获取浏览器的宽高，html拿到浏览器的宽高后，子元素宽高就可以用百分比值，后面的百分比值就可以生效了

其余的就没啥问题了，看一遍就可以了

总结：就是大盒子在小盒子里滚动【因为超出了父盒子【小盒子】的范围】

BOX 宽高必须为定值，而且小于content，不能为可变动的值，注意