CSS实现横向滑动

html

<div class="header1">
	<div class="header-nei">
		<div>第一场</div>
		<div>第二场</div>
		<div>第三场</div>
		<div>第四场</div>
		<div>最终排名</div>
	</div>
</div>

CSS

.header1{
	overflow: hidden;            /*最外层设置  溢出隐藏  */
}
.header-nei{
	white-space: nowrap;        /*第二层设置  不换行  */
	overflow-y: auto;                /*溢出框 提供滚动机制*/
}
.header-nei div{
	background: #5C5C5C;
	width: 30%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	color: #FFFFFF;
	display: inline-block;              /*最内层div设置inline-block*/
}