當我們在瀏覽器上要達到一塊區域的水平或垂直能夠滾動，有很多種通過不同的語言實現的方式，接下來介紹的就是其中最簡單的一種，通過h5和css樣式實現水平方向的滾動，而這種方式除了使用大家常用的浮動、行塊轉換之外必不可少的就是使用css的overflow屬性。

浮動:float屬性，屬性值常用的有left，right（注:浮動屬性在使用後，一定要清除掉，否則會對後面的佈局造成影響）

http://www.360doc.com/content/16/0324/15/2555312_544892999.shtml

行塊轉換:display屬性，屬性值常用的有:inline，block，inline-block（將元素轉換為行內元素，將元素轉換為塊級元素，將元素轉換位行內塊級元素）

http://blog.csdn.net/whoami021/article/details/20126449

overfow屬性:

瀏覽器支援:所有主流瀏覽器都支援 overflow 屬性。

注：任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。

以下是其值和官方的描述:

接下來給大家展示的是一個我的小demo，大家可以把li標籤下的圖片換成自定義的內容，就可以實現水平滾動的效果了

h5程式碼:

<div class="pic">
    <ul id="category-head">
        <li><img src="img_warfireandorder/game-f-2.jpg" alt=""></li>
        <li><img src="img_warfireandorder/game-f-3.jpg" 
 
alt=""></li>
        <li><img src="img_warfireandorder/game-f-4.jpg" alt=""></li>
        <li><img src="img_warfireandorder/game-f-5.jpg" alt=""></li>
        <li><img src="img_warfireandorder/game-f-6.jpg" alt=""></li>
    </ul>
</div>

#category-head{
    width:100%;
display: inline;
white-space: nowrap;/*規定段落中的文字不進行換行*/
overflow-x:scroll;/*水平方向，超出部分新增滾動機制*/
float:left;/*一定要設定左側浮動*/
overflow-y:hidden/*豎直方向，超出部分隱藏*/
}
#category-head li{
    margin-top: 10px;
display:inline-block;/*既可以水平排列，又可以設定寬高和邊距*/
}