<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. L3.二.return

    # 函数的返回值 def get_max(a,b,c): max_num=a if b > max_num: max_num = b if c > max_num: max_num = c ...

  2. Oliver Twist

    对于济贫院那些绅士们而言,贫民好吃懒做.贪得无厌.他们消耗的食物即是对教区最大的威胁. 绅士们的利益得不到满足时,孤儿们只能被驱之而后快,甚至被"加价出售". 然而,眼泪这种东西根 ...

  3. POJ - 3278 Catch That Cow 简单搜索

    Farmer John has been informed of the location of a fugitive cow and wants to catch her immediately. ...

  4. golang关键字select的三个例子, time.After模拟socket/心跳超时

    golang关键字select的三个例子, time.After模拟socket/心跳超时   例子1 select会随机选择一个可执行的case   // 这个例子主要说明select是随机选择一个 ...

  5. Flutter 1.17版本重磅发布

    Flutter 1.17 是2020年的第一个稳定版本,此版本包括iOS平台Metal支持(性能更快),新的Material组件,新的Network跟踪工具等等! 对所有人来说,今年是充满挑战的一年. ...

  6. Coursera课程笔记----计算导论与C语言基础----Week 11

    C程序中的字符串(Week 11) 字符数组 所有的字符串,都是以\0结尾的 只能在数组定义并初始化的时候:char c[6] = "China"; 不能用赋值语句将一个字符串常量 ...

  7. 【Hadoop离线基础总结】工作流调度器azkaban

    目录 Azkaban概述 工作流调度系统的作用 工作流调度系统的实现 常见工作流调度工具对比 Azkaban简单介绍 安装部署 Azkaban的编译 azkaban单服务模式安装与使用 azkaban ...

  8. MySQL基础总结（二）

    数据表的完整性约束条件 AUTO_INCREMENT (自增长) 注意事项: 1.一个表中只能有一个自增长字段 2.必须配合主键使用 方法1: 方法2: 方法3: 指定自增长初始值的方法: 修改自增长 ...

  9. Qt子窗口设置背景色只能应用到其中的部件的问题

    问题描述:设置父窗口后子窗口会嵌在父窗口中,背景变透明,此时用qss设置子窗口的背景色发现只应用到的子窗口的控件中,除控件外的地方并没有应用到背景色. 解决方法:不使用qss设置背景色,重写paint ...

  10. 使用PXE+Kickstart无人值守安装服务

    一.      配置DHCP服务程序 1)      按照图在虚拟机的虚拟网络编辑器中关闭自身的DHCP服务. 2)      当挂载好光盘镜像并把Yum仓库文件配置妥当后,就可以安装DHCP服务程序 ...