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. (转)Linux: dirname、basename命令详解

    Linux: dirname.basename命令详解 原文:http://blog.sina.com.cn/s/blog_3f63916f010143vo.html 一.dirname指令 1.功能 ...

  2. 车牌号校验js

    var regExp = /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9 ...

  3. mysql双主互备

    mysql主从同步使得数据可以从一个数据库服务器复制到其他服务器上,在复制数据时,一个服务器充当主服务器(master),其余的服务器充当从服务器(slave),备服务器从主服务器同步数据,完成数据的 ...

  4. Python编程实现USB转RS485串口通信

    ---作者吴疆,未经允许,严禁转载,违权必究--- ---欢迎指正,需要源码和文件可站内私信联系--- -----------点击此处链接至博客园原文----------- 功能说明:Python编程 ...

  5. Linux - 数值运算

    Shell - 数值运算 因为shell脚本是属于弱语言,没有变量类型的概念,所以定义变量会默认为字符串.就算看上去是一个数字,当直接进行计算时,就会出错: x=1 echo $x+=1 # 输出1+ ...

  6. 【解决】Git failed with a fatal error. Authentication failed for ‘http://......’

    今天在visual studio中运行项目,打算pull最新的代码的时候,报错: Git failed with a fatal error. Authentication failed for ‘h ...

  7. HTTP原理及状态码汇总

    什么是HTTP: HTTP(HyperText Transfer Protocol超文本传输协议)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准,为了提供一种发布和接收HTM ...

  8. fstab 解析

    某些时候当Linux系统下划分了新的分区后,需要将这些分区设置为开机自动挂载,否则,Linux是无法使用新建的分区的. /etc/fstab 文件负责配置Linux开机时自动挂载的分区. Window ...

  9. 分布式缓存memcached介绍，win7环境安装，常用命令set,get,delete,stats， java访问

    一.memcached是什么? 二.memcached不互相通信的分布式 三.安装步骤 四.本文介绍的命令主要包括: 存入命令(Storage commands) 取回命令(Retrieval com ...

  10. ubuntu双屏调整分辨率

    查看屏幕硬件指标 # xrandr Screen 0: minimum 8 x 8, current 2390 x 768, maximum 32767 x 32767 LVDS1 connected ...