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*/
}