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. PHP setcookie()用法

    定义和用法 setcookie() 函数向客户端发送一个 HTTP cookie. cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到用户计算机中的小文本文件.每当计算机通过 ...

  2. 小程序的switch组件

    小程序的switch开关组件,总结下大概有三种使用场景. 其一: 纯展示场景, 用来展示某个开关值是打开还是关闭的,这个场景比较简单,给个disabled属性就ok了: 其二: 用户点击后立即切换开关 ...

  3. Java使用Zxing生成、解析二维码工具类

    Zxing是Google提供的关于条码(一维码.二维码)的解析工具,提供了二维码的生成与解析的方法. 1.二维码的生成 (1).将Zxing-core.jar 包加入到classpath下. (2). ...

  4. hibernate丢失更新

    如果多个线程操作基于同一个查询结构对表中的记录进行修改,那么后修改的记录将会覆盖前面修改的记录,前面的修改就丢失掉了,这就叫做更新丢失.Serializable可以防止更新丢失问题的发生.其他的三个隔 ...

  5. java8 peek

    这样不会有任何的输出:Stream.of("one", "two", "three", "four").peek(e - ...

  6. spring batch 以游标的方式 数据库读取数据 然后写入目标数据库

    前面关于Spring Batch的文章,讲述了SpringBatch对Flat.XML等文件的读写操作,本文将和大家一起讨论Spring Batch对DB的读写操作.Spring Batch对DB数据 ...

  7. axios拦截器+mockjs

    //main.js中 //引入你mock.js文件 require('./mock.js') //封装api请求 //src/axios/api.js import axios from 'axios ...

  8. 制作centos安装u盘

    格式化 mkfs.vfat /dev/sdb1 制作 dd if=CentOS-7-x86_64-Minimal-1503-01.iso of=/dev/sdb # 1. 注意是/dev/sdb 不是 ...

  9. 使用NIO快速复制Java文件

    package com.test.test; import java.io.File;import java.io.FileInputStream;import java.io.FileOutputS ...

  10. Linux让Apache支持中文URL图片/文件名

    需要用到iconv_hook和mod_encoding Apache(32位): 安装环境:CentOS 5.6 + Apache 2.2.15 (Apache2.4同样适用) 安装结果:安装后支持“ ...