<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. Netty（二）：数据在ChannelPipeline中的流经

    本文目的:测试数据在ChannelPipeline中的流经顺序及状态. 先看本文的测试代码: AdditionalInBoundHandler:入站处理器,不做任何处理,只是在响应读事件时打印用来观察 ...

  2. stl的stack在开发中的应用

    栈有后进先出特点,我们可以用它来暂时保存数据,在画板开发中,我用到了栈来保存用户的每一步操作,当用户点击撤销时可以把图像从栈里面取出,然后恢复.浏览器的前进和后退也是这个原理,只是它保存的是网页罢了. ...

  3. 信息竞赛进阶指南--区间最值问题的ST算法

    void ST_prework() { for (int i = 1; i <= n; i++) f[i][0] = a[i]; int t = log(n) / log(2) + 1; for ...

  4. CodeForces - 1176A Divide it! （模拟+分类处理）

    You are given an integer nn. You can perform any of the following operations with this number an arb ...

  5. 数学--数论--HDU1825（积性函数性质+和函数公式+快速模幂+非互质求逆元）

    As we all know, the next Olympic Games will be held in Beijing in 2008. So the year 2008 seems a lit ...

  6. mac安装vue-devtools

    mac安装vue devtools 1.到github下载vue tool 的压缩包 正常的方法:git clone https://github.com/vuejs/vue-devtools 但事实 ...

  7. Neo4j填坑记录-Neo4jClient建立节点、建立关系相关

    最近一个项目需要用到知识图谱,选用了neo4j图数据库,在这过程中遇到几个坑,记录一下 1.无法登录,疯狂提示“WebSocket connection failure. Due to securit ...

  8. Matlab中 awgn 函数输入参数带有‘measured’ 时snr的含义

    MATLAB中awgn 函数可以为输入信号x 添加一定大小的噪声. out = awgn(in,snr,'measured');  是一种常见的使用方法,意思是在添加噪声前先测量一下输入信号的功率,再 ...

  9. [vijos P1008 篝火晚会]置换

    题意:编号1-n的小朋友依次围成一圈,给定目标状态每个小朋友左右两边的小朋友编号,每次可以选择编号为[b1,b2,...,bm]的小朋友,作1次轮换,bi是任意编号,代价为m.求变成目标状态所需的最小 ...

  10. RESTful设计中的常见疑问

    最近写了几个有关RESTful的API相关内容,也谈谈对常见问题的自己的理解. 什么是RESTful 详情可以看http://www.ruanyifeng.com/blog/2011/09/restf ...