可以水平滚动的导航栏

更新时间：2022-08-22 17:36:37

有时候我们的水平导航栏的长度会超过屏幕宽度,那么如何增加水平滚动条呢?

使用场景:新闻页面的导航栏.

实现的效果如下:

火狐中:
可以水平滚动的导航栏
chrome中:

代码如下:

Html代码  
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">  
<script src="http://www.ycf518518.com/static/js/jquery-1.11.1.js" type="text/javascript"></script>  
<script >  
window.onload=function()  
{  
var width = 0;  
    $('nav div.container a').each(function () {  
    width += (this.offsetWidth+10);//不包括超链接的margin  
      
  });  
  //alert(width);  
  $('#overflow div.container').css('width', width + "px");  
}  
</script>  
<style>  
#overflow {  
        border: 1px solid #f00;  
        overflow-x: scroll;  
        overflow-y: hidden;  
        width: 100%;   
    }  
    nav div a{  
        margin-right: 10px;  
        display:inline-block;  
        float:left;  
    }  
</style>  
</head>      
<body>  
<header>  
<h1>新闻</h1>  
</header>  
<nav>  
<div id="overflow" >  
<div class="container">  
<a href="index.asp">Home1</a>  
<a href="html5_meter.asp">Previous2</a>  
<a href="html5_noscript.asp">栏目3</a>  
<a href="html5_noscript.asp">栏目4</a>  
<a href="html5_noscript.asp">栏目5</a>  
<a href="html5_noscript.asp">栏目6</a>  
<a href="html5_noscript.asp">栏目7</a>  
<a href="html5_noscript.asp">栏目8</a>  
<a href="html5_noscript.asp">栏目9</a>  
<a href="html5_noscript.asp">栏目10</a>  
<a href="html5_noscript.asp">栏目11</a>  
<a href="html5_noscript.asp">栏目12</a>  
<a href="html5_noscript.asp">栏目13</a>  
<a href="html5_noscript.asp">栏目14</a>  
<a href="html5_noscript.asp">栏目15</a>  
  
</div>  
</div>  
</nav>  
</body>  
</html>  

注意:

(1)超链接的样式一定要添加float:left

(2)overflow的宽度一定不能超过屏幕宽度,否则网页就会出现水平滚动条

这不是我们期望的效果:
可以水平滚动的导航栏

参考:http://hw1287789687.iteye.com/admin/blogs/2184331

上一篇 : ：微软在Apache许可证下发布F#下一篇 : 使用反射获取和设置对象的值

可以水平滚动的导航栏

相关阅读

推荐文章