在前端UI设计时，网页的制作很麻烦，深有感悟！碰到太多的不懂，或是第一次见，就要去网上找资料！横向滚动条就是我遇到麻烦中其中的一个，其实也 很简单，只是在几次项目中都用到了这个横向滚动条所以就拿出来说一下。

需求界面---如下图：

     就是一个div里面放很多button，超出div宽度，下方出现横向滚动条。实际情况中，肯定不止几个button，它是可以动态的添加进去，所以父div的宽度肯定不够，但界面的位置排版又有要求，所以不得不弄一个横向滚动条。

代码如下：

进入分区

用CSS实现横向滚动条

在进行app制作时,需要使用横向滚动条是内容展示更完善 首先,这是html代码: 这是CSS代码: 要点: 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hid ...

纯css 实现横向滚动条--移动端

* { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden ...

css 横向滚动条webkit-scrollbar

最近遇到一个横向滚动条的问题: 官网链接: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar 这个 ::-web ...

jquery横向滚动条

此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. /p>

CSS美化页面滚动条

文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...

JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

js网页滚动条滚动事件实例分析

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

逆天的IE7中，诡异的横向滚动条

今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...

CSS定义网页滚动条

(一)滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow ...

随机推荐

Dagger2 (一) 入坑篇

为什么是Dagger2 为了更好的了解Dagger2,请先阅读RoboGuice篇了解依赖注入. 官方文档称,依赖注入这种技术已经在存在多年了,为什么Dagger2要造轮子? Dagger2是第一个全 ...

CentOs5.8下安装Oracle12C

12C安装向导: http://docs.oracle.com/database/121/LTDQI/toc.htm 12C下载地址: http://www.oracle.com/technetwor ...

LeetCode 【47. Permutations II】

Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

【翻译习作】 Windows Workflow Foundation程序开发-第一章04

1.2.3  Windows Workflow运行时 从Windows Workflow的角度看,可以将工作流活动当成是交给一个工作流处理器去执行的一系列指令或操作码.在Windows Workflo ...

METRO风格

METRO风格是指微软在WINDOWS PHONE 7中新加入的界面风格,并且计划将其用于windows8中的开始菜单界面.该界面的特点是简洁高效,每一个METRO图标都没有边框,形状有点像地铁站中的 ...

OSS.Common扩展.Net Standard支持实例分享

上篇(.Net基础体系和跨框架开发普及)介绍了.Net当前生态下的大概情况,也分享了简单实现的过程,这篇文章就是讲解我的OSS.Common项目扩展.Net Standard 支持的过程,主要集中在: ...

Http get方式url参数长度以及大小

详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp69 众所周知, 传递小量参数(在没有其他原因,例如隐藏参数值的情况下)推 ...

win10汇编如何debug(小白向)

先引用别人的方法 http://blog.csdn.net/lcr_happy/article/details/52491107 按他所说的下完对应软件后,安装其中的dosbox,然后将debug.e ...

spring Boot环境下dubbo+zookeeper的一个基础讲解与示例

一,学习背景 1.   前言 对于我们不管工作还是生活中,需要或者想去学习一些东西的时候,大致都考虑几点: a)      我们为什么需要学习这个东西? b)     这个东西是什么? c)      ...