问题总结：

1、ul要比外套div宽度的值大一点

2、ul需要往左移动1px

3、外套的div设置overflow隐藏

解决抖动：

1、li宽度设置98px，padding左右值1px，hover之后宽度不变，padding清零

2、li宽度设置100px，hover之后宽度设为98px

bug问题：

外套div如果宽度500px，内部5个小盒子宽度需要比100px宽点，下面设置的是102px

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 500px;

            height: 100px;

            margin: 100px auto;

            border: 1px solid #ff0000;

            overflow: hidden;

        }

        ul {

            list-style: none;

            width: 510px;

            margin-left: -1px;

        }

        li {

            float: left;

            width: 102px;

            height: 40px;

            font: 400 13px/40px "simsun";

            cursor: pointer;

            text-align: center;

        }

            li:hover {

                width:100px;

                border-left: 1px solid #808080;

                border-right: 1px solid #808080;

                color: #f40;

            }

    </style>

</head>

<body>

    <div>

        <ul>

            <li>商品</li>

            <li>商品</li>

            <li>商品</li>

            <li>商品</li>

            <li>商品</li>

        </ul>

    </div>

</body>

</html>

CSS——tab导航demo的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  3. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  4. 基于sticky组件，实现带sticky效果的tab导航和滚动导航

    上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...

  5. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  6. CSS 自适应导航菜单

    文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...

  7. 微信小程序小技巧系列《一》幻灯片，tab导航切换

    作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...

  8. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  9. Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

    action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...

随机推荐

  1. [bzoj1492][NOI2007]Cash[CDQ分治；dp；斜率优化]

    首先,设f[x]表示x天能获得的A券最大值,有动规方程: $f[i]=max\{f[j]*A[i]+f[j]*B[i]/R[j]\}*R[i]/(R[i]*A[i]+B[i])$, 设 $j<k ...

  2. HBase单节点的安装与配置

    HBase的安装配置1.下载:http://mirror.bit.edu.cn/apache/hbase/stable/   hbase-1.2.6-bin是直接编译好的,直接安装.   hbase- ...

  3. WINDOWS下调用GetTokenInformation的奇怪之处--两次调用

    就是用getLastErr可以得到错误号,同时,会将需要的长度写到参数里,再进行第二次调用,以此来节约内存空间. 神奇的长见识了. 相关说法如下: ====================== The ...

  4. SVM学习（续）核函数 & 松弛变量和惩罚因子

    SVM的文章可以看:http://www.cnblogs.com/charlesblc/p/6193867.html 有写的最好的文章来自:http://www.blogjava.net/zhenan ...

  5. C语言的数组初始化

    http://blog.csdn.net/sibylle/article/details/2026915 一直以为 int a[256]={0};是把a的所有元素初始化为0,int a[256]={1 ...

  6. 【bzoj3105】【cqoi2013】【新Nim游戏】【线性基+贪心】

    Description 传统的Nim游戏是这种:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量能够不同).两个游戏者轮流操作,每次能够选一个火柴堆拿走若干根火柴.能够仅仅拿一根,也能够拿走整堆火柴 ...

  7. 【ora10,4】oracle后台进程介绍：

    一.SMON(System MONitor) 系统监控进程:      在数据库启动过程中,SMON排在CKPT进程之后,在Oracle9i中排在第六号的位置: PMON started with p ...

  8. POJ2481：Cows(树状数组)

    Description Farmer John's cows have discovered that the clover growing along the ridge of the hill ( ...

  9. 金典 SQL笔记(6)

    page223-索引 --利用SQL 语句创建索引 --CREATE INDEX 索引名称on 表名(字段 ,字段, 字段字段n) --索引名称必须为唯一的,字段 ,字段, 同意一个到多个 --范例为 ...

  10. DCS实践干货：使用Redis实现分布式锁

    场景介绍 很多互联网场景(如商品秒杀,论坛回帖盖楼等),需要用加锁的方式,以对某种资源进行顺序访问控制.如果应用服务集群部署,则涉及到对分布式应用加锁.当前分布式加锁主要有三种方式:(磁盘)数据库.缓 ...