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. C. Destroying Array 并查集,逆向思维

    用并查集维护线段,从后往前枚举没个删除的位置id[i] 那么,现在删除了这个,就是没有了的,但是上一个id[i + 1]就是还没删除的. 然后现在进行合并 int left = id[i + 1];( ...

  2. tcpdump安装配置及抓包分析

    http://blog.csdn.net/e421083458/article/details/23963189 cpdump安装配置及抓包分析 预装软件:[plain] view plain cop ...

  3. java数据结构和算法07(2-3-4树)

    上一篇我们大概了解了红黑树到底是个什么鬼,这篇我们可以看看另外一种树-----2-3-4树,看这个树的名字就觉得很奇怪.... 我们首先要知道这里的2.3.4指的是任意一个节点拥有的子节点个数,所以我 ...

  4. 11个炫酷的 Linux 终端命令

    我已经用了十年的Linux了,通过今天这篇文章我将向大家展示一系列的命令.工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我. 1.命令行日常系快捷键 如下的快捷方式非常有用,能够 ...

  5. XShell远程连接本地虚机

    有很多朋友在自己电脑上部署完成了虚机,但是不知道怎么去用工具连接自己的虚机,下面给大家讲一下大概的步骤,不足之处敬请指正!! 1.打开我们的虚拟机平台,登录虚机 2.远程那肯定要知道虚机的IP地址,在 ...

  6. hibernate课程 初探单表映射1-4 hibernate开发前准备

    开发前准备: 1 eclipse 2 hibernate tools的安装(需要相关的jar包)(可以简化orm框架) hibernate tools的安装步骤: 1 到官网下载 https://so ...

  7. BZOJ3693: 圆桌会议(Hall定理 线段树)

    题意 题目链接 Sol 好的又是神仙题... 我的思路:对于区间分两种情况讨论,一种是完全包含,另一种是部分包含.第一种情况非常好判断,至于计算对于一个区间[l, r]的$\sum a[i]$就可以了 ...

  8. 原生ajax瀑布流demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

  9. C#类型简述

    一.值类型 1.布尔类型 bool,范围 true false 2.整数类型 sbyte,范围 -128~127 byte,范围 0~255 short,范围 -32768~32767 ushort, ...

  10. linux 命令——20 find(转)

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec  参数后面跟的是command ...