<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>test</title>

  <style media="screen">

    .tab-head{

      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:#FF4878;

      padding:0;

      overflow:auto;

      }

    .tab-head-item{

      -webkit-box-flex:1;

      -webkit-flex:1 0 auto;

      -ms-flex:1 0 auto;

      flex:1 0 auto;

      color:white;

      padding:0 5px;

      }

  </style>

</head>

<body>

    <ul class="tab-head">

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

        <li class="tab-head-item">兴趣爱好</li>

    </ul>

</body>

</html>

css实现手机端导航栏左右滑动的更多相关文章

  1. css制作最简单导航栏

    css制作最简单导航栏

  2. 双击导航栏自动滑动ListView到顶部

    有些app都实现了双击导航栏让页面的list自动滑动到顶部的feature. 先实现一个继承于OnTouchListener的监听多次点击事件的监听器,通过callback把连续点击的次数返回给客户代 ...

  3. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  4. CSS实现动画特效导航栏

    0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2 ...

  5. 手风琴图片和钢琴导航栏JQ滑动特效

    手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 微信小程序导航栏，下面内容滑动，上册导航栏跟着滑动，内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  7. 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  8. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  9. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

随机推荐

  1. CF思维联系– Codeforces-987C - Three displays （ 动态规划）

    ACM思维题训练集合 It is the middle of 2018 and Maria Stepanovna, who lives outside Krasnokamensk (a town in ...

  2. prufer编码学习笔记

    prufer 编码 对于一个无根树,他的 prufer 编码是这样确定的: 每次找到编号最小的一个叶子节点,也就是度数为\(1\)的节点,把和它相连的点,加入 prufer 编码序列的末尾,然后把这个 ...

  3. Jmeter 插件图表分析

    1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在 setting 中可以设置时间间隔以及其他的参数,右击可以导出 ...

  4. App 自动化环境搭建

    1.安装 Appium-desktop 工具 下载地址:https://github.com/appium/appium-desktop/releases 2.安装 Android 环境 安装 JDK ...

  5. vue添加，删除内容

    vue 提交添加内容,点击删除内容 1 html <input v-model="inputValue" /> <button @click="hand ...

  6. DVWA-对Command Injection(命令注入)的简单演示与分析

    前言 上一篇文章中,对命令注入进行了简单的分析,有兴趣的可以去看一看,文章地址 https://www.cnblogs.com/lxfweb/p/12828754.html,今天这篇文章以DVWA的C ...

  7. vue-双向响应数据底层原理分析

    总所周知,vue的一个大特色就是实现了双向数据响应,数据改变,视图中引用该数据的部分也会自动更新 一.双向数据绑定基本思路 “数据改变,视图中引用该数据的部分也会自动更新“,从这句话,我们可以分析出以 ...

  8. PROTEUS串口仿真遇到的BUG(转载)

    转载自:http://blog.csdn.net/viperchaos/article/details/6246419 串口通信设置的顺序非常重要,最好严格按照步骤来,在开启数据接受的使能之前最好一定 ...

  9. [hdu5418 Victor and World]floyd + 状压DP 或 SPFA

    题意:给n个点,m条边,每次只能沿边走,花费为边权值,求从1出发经过所有其它点≥1次最后回到1的最小花费. 思路: 状压DP.先用Floyd得到任意两点间的最短距离,转移时沿两个点的最短路转移.此时的 ...

  10. [hdu5203]计数水题

    思路:把一个木棍分成3段,使之能够构成三角形的方案总数可以这样计算,枚举一条边,然后可以推公式算出当前方案数.对于已知一条边的情况,也用公式推出.用max和min并维护下,以减少情况数目. #prag ...