html/css/js-横向滚动条的实现
在前端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>
最新文章
- 超简洁的CSS下拉菜单
- JS SDK 随手笔记
- window 链接方式
- manifest package
- Lua函数之二
- HDU 4057 Rescue the Rabbit(AC自动机+DP)
- MySQL数据库恢复的经历。
- c#高效的线程安全队列ConcurrentQueue<T>(上)
- PHP优化杂烩
- PL/SQL练习
- MVC中一般为什么用IQueryable而不是用IList？用IQueryable比IList好在哪？
- Hibernate + MySQL中文乱码问题
- apk混淆打包注意事项
- 初探JavaScript魅力（四）
- Jenkins+Git配置
- solr6.5的安装与配置
- 促进客户转化，提高客单价！酷客多小程序发布版本V1.0.9！
- Linux(Ubuntu)使用日记------部署JavaWeb项目到服务器
- 网络安装Centos x64 6.10
- jackson 用法总结