在前端UI設計時，網頁的制作很麻煩，深有感悟！碰到太多的不懂，或是第一次見，就要去網上找資料！橫向滾動條就是我遇到麻煩中其中的一個，其實也 很簡單，只是在幾次項目中都用到了這個橫向滾動條所以就拿出來說一下。
需求界面---如下圖：
就是一個div里面放很多button，超出div寬度，下方出現橫向滾動條。實際情況中，肯定不止幾個button，它是可以動態的添加進去，所以父div的寬度肯定不夠，但界面的位置排版又有要求，所以不得不弄一個橫向滾動條。
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>進入分區</title>
</head>
<body>
<div style="height:60px;
overflow-x:scroll;
white-space:nowrap;
width:500px;">
<button style="height:38px;
margin-top:2px;">1號分區</button>
<button style="height:38px;
margin-top:2px;">2號分區</button>
<button style="height:38px;
margin-top:2px;">3號分區</button>
<button style="height:38px;
margin-top:2px;">4號分區</button>
<button style="height:38px;
margin-top:2px;">5號分區</button>
<button style="height:38px;
margin-top:2px;">6號分區</button>
<button style="height:38px;
margin-top:2px;">7號分區</button>
<button style="height:38px;
margin-top:2px;">8號分區</button>
</div>
</body>
</html>