在h5中运用简单的css达到水平滚动的效果

当我们在浏览器上要达到一块区域的水平或垂直能够滚动，有很多种通过不同的语言实现的方式，接下来介绍的就是其中最简单的一种，通过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.youkuaiyun.com/whoami021/article/details/20126449

overfow属性:

浏览器支持:所有主流浏览器都支持 overflow 属性。

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

定义和用法:overflow 属性规定当内容溢出元素框时发生的事情。

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

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

接下来给大家展示的是一个我的小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>

css代码:

#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;/*既可以水平排列，又可以设置宽高和边距*/
}