<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. Pig设计模式概要以及与SQL的设计模式的对比

    2019独角兽企业重金招聘Python工程师标准>>> 1概要模式 概要模式其实就是数据的全貌信息的获取,主要分为3种: 1.1数值概要 #HSQL SELECT MIN(num), ...

  2. LNMP环境搭建之php安装

    和LAMP安装PHP方法有差别,需要开启php-fpm服务 下载php cd /usr/local/src/ wget http://cn2.php.net/distributions/php-5.6 ...

  3. 写代码？程序猿？你不能不懂的八大排序算法的Python实现

    信息获取后通常需要进行处理,处理后的信息其目的是便于人们的应用.信息处理方法有多种,通常由数据的排序,查找,插入,删除等操作.本章介绍几种简单的数据排序算法和高效的排序算法. 本章主要涉及到的知识点有 ...

  4. Windows+Ubuntu双系统 ，Ubuntu安装

    这篇只是简单记录自己在Win10下另安装Ubuntu系统. 不是教程,因为不会. 推荐一个教程:https://blog.csdn.net/weixin_37029453/article/detail ...

  5. Redis 到底是单线程还是多线程？我要吊打面试官！

    最近在Java技术栈公众号发布的一篇文章,其中有一道题: Redis是多线程还是单线程?(回答单线程的请回吧,为什么请回,请往下看) 好些粉丝在后台问我:为什么请回,Redis不是单线程吗? 大家注意 ...

  6. C++关闭同步流 ios::sync_with_stdio(false)

    说明:ios::sync_with_stdio(false) 1.这句语句是用来取消cin的同步,什么叫同步呢?就是iostream的缓冲跟stdio的同步.这就是为什么cin和cout比scanf和 ...

  7. Spring官网阅读（九）Spring中Bean的生命周期（上）

    文章目录 生命周期回调 1.Bean初始化回调 2.Bean销毁回调 3.配置默认的初始化及销毁方法 4.执行顺序 5.容器启动或停止回调 Lifecycle 接口 LifecycleProcesso ...

  8. python学习之如何一次性输出多个变量的值

    如果要输出多个结果 ,中间使用逗号隔开,且引用变量为%(变量1,变量2,变量3)例如

  9. Maxim实时时钟芯片设计指南5413-二进制编码十进制（BCD）格式实时时钟中的状态机逻辑

    网上DS12C887的文章涉及到时间的存储格式使用的都是二进制代码,究竟使用BCD码该如何操作?正好美信官网上有一篇文章.美信官网不稳定,先贴到这里,有时间再翻译. 原文链接 State Machin ...

  10. Qt源码解析之-从PIMPL机制到d指针

    一.PIMPL机制 PIMPL ,即Private Implementation,作用是,实现 私有化,力图使得头文件对改变不透明,以达到解耦的目的 pimpl 用法背后的思想是把客户与所有关于类的私 ...