css:

.tab{
         list-style-type: none;
         display:-webkit-box;
         display:-webkit-flex;
         display:-ms-flexbox;
         display:flex;
         -webkit-flex-wrap:nowrap;
         -ms-flex-wrap:nowrap;
         flex-wrap:nowrap;
         -webkit-box-pack:justify;
         -webkit-justify-content:space-between;
         -ms-flex-pack:justify;
         justify-content:space-between;
         background:#ccc;
         padding:0;
         overflow:auto;}
    .tab-item{
        -webkit-box-flex:1;
        -webkit-flex:1 0 auto;
        -ms-flex:1 0 auto;
        flex:1 0 auto;
        color:white;
        padding:0 0.5rem;
    }

html:

<ul class="tab margin-top5">
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
    </ul>

css3 横向拖拽的更多相关文章

  1. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

  2. 【Android】HorizontalScrollView内子控件横向拖拽

    前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 声明 欢迎转载,但请保留文章原始出处:)  博客园 ...

  3. js css3 固定点拖拽旋转

    一.直接上效果图: 然后是代码: 一共两种实现方式: <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. javascript小实例，拖拽应用（一）

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

  5. 自制一个H5图片拖拽、裁剪插件（原生JS）

    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...

  6. 手把手实现腾讯qq拖拽删去效果（二）

    这节,就一个任务如何把上节自定义的翻页动画控件整进下拉列表中去. 由于是自定义的下拉列表控件,我们需要自定义能够上啦下滑的listview,这势必会造成这个问题,上拉刷新要响应相应touch事件,拖拽 ...

  7. css 可拖拽列表

    <!DOCTYPE HTML> <html><head> <meta charset="UTF-8"> <title>d ...

  8. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  9. vue-slicksort拖拽组件

    vue-slicksort拖拽组件 安装 通过npm安装 $ npm install vue-slicksort --save 通过yarn安装 $ yarn add vue-slicksort 插件 ...

随机推荐

  1. jquery——解决鼠标移入移出导致盒子不停移动的bug

    使用mouseover().mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: <!DOCTYPE html> <html l ...

  2. Ubuntu同屏多终端

    sudo apt-get install terminator

  3. vbox和宿主机共享文件夹

    首先,查看vbox安装的ubuntu是否支持vboxsf模块 sudo modprobe vboxsf dmesg | grep vboxsf 如果没有安装,需要安装vboxsf模块:(如果安装了请跳 ...

  4. 新浪php面试题

    1. echo count("abc"); 输出什么?答:"1" count — 计算数组中的单元数目或对象中的属性个数int count ( mixed $v ...

  5. SpringBoot | 第十章：Swagger2的集成和使用

    前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成.现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的沟 ...

  6. arcgis js 几种拓扑关系详解

    arcgis js的拓扑关系,在处理复杂逻辑和分析时,可以通过拓扑关系,减小客户端的工作量 拓扑关系: 1.overlaps 重叠 这里的重叠跟平时我们理解的不太一样,这里的重叠,必须是A与B有交集, ...

  7. 面向对象设计与构造：oo课程总结

    面向对象设计与构造:OO课程总结 第一部分:UML单元架构设计 第一次作业 UML图 MyUmlInteraction类实现接口方法,ClassUnit和InterfaceUnit管理UML图中的类和 ...

  8. 极飞P20农业无人机多机协同作业飞行

                      来自为知笔记(Wiz)

  9. webpack 安装后提示CLI

    webpack 4X 后需要安装webpack-cli 请注意需要安装在同一目录 npm install --save-dev webpack -g 输入以上命令后: webpack -v 提示: T ...

  10. 一位学长的学习建议（java方向）

    1.前台总得有个拿的出手的页面能力吧,ajax,jquery不说精通但是至少能看懂,能根据业务需求来改吧. 2.数据库方面至少得玩过mysql,DB2,Oracle中的两个以上吧.hibernate或 ...