在前端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>

html/css/js-横向滚动条的实现的更多相关文章

  1. 用CSS实现横向滚动条

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

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

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

  3. css 横向滚动条webkit-scrollbar

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

  4. jquery横向滚动条

    此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  5. CSS美化页面滚动条

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

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

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

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

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

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

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

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

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

  10. CSS定义网页滚动条

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

随机推荐

  1. 一天一点Zynq（1）xilinx-arm-linux交叉编译链 安装总结以及资源更新

    结束了对xilinx-arm-linux交叉编译链安装后,总结一下整个过程,方便后来的研究者们,少走点弯路. 关于xilinx-arm-linux交叉编译链的安装,网上一搜一大把,可是有的资料中的资源 ...

  2. 关于WebUpload插件的使用

    上传的路径地址: 删除图片时也应该注意: unlink('/Upload/1.jpg')删除不了 unlink('./Upload/1.jpg')可以删除. 也就是说,绝对路径删除不了  相对路径可以 ...

  3. .net core webapi带权限的文件下载方法

    众所周知,在webapi中,如果有个接口需要权限,一般会将带权限的字段塞进header中.但是,在带权限的文档下载接口中,无论是用post,还是get方式,我们无法设置header头信息.苦恼呀?别急 ...

  4. C语言函数的存储类别

    函数默认的隐含存储类型是extern auto:只能用于局部变量 extern:允许被其他文件调用 static:只能被本源程序文件调用

  5. Java 获取class method parameter name

    package org.rx.util; import org.objectweb.asm.*; import java.io.IOException; import java.io.InputStr ...

  6. Linux:挂载、卸载光盘

    挂载.卸载光盘 前提准备: 已经安装好虚拟机 安装好的虚拟机与镜像系统最好一致 前提配置 1.选择虚拟机 2.选择设置 3.选择CD/DVD 4.选择ISO镜像文件,选择设备状态,都勾选 5.ps如果 ...

  7. 团队-爬虫豆瓣top250项目-模块开发过程

    项目托管平台地址:https://github.com/gengwenhao/GetTop250.git 开发模块功能: "get_info()单个页面的爬取"功能,开发时间:15 ...

  8. seajs引入jquery框架问题

    seajs引入jquery框架时出现的问题 原因:由于seajs是遵循cmd规范,而jquery是遵循amd规范,所以在seajs调用jquery框架时,需要将amd转换为cmd 转换方法:jquer ...

  9. 自动化测试-11.selenium的下拉框处理类Select

    前言 最近由于工作原因,更新慢了一点,今天终于抽出一点时间给大家继续更新selenium系列,学习的脚本不能停止,希望小伙伴能多多支持. 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关 ...

  10. Linux 查看端口被什么程序占用

    lsof -i:8899 输出: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEjava 38889 root 329u IPv6 5883661 ...