问题总结：

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. php7.0升级到php7.1

    $ add-apt-repository ppa:ondrej/php$ apt-get update$ apt-get upgrade php 来源:http://www.wuweixin.com/ ...

  2. CentOS 7: Install vsftpd

    Install vsftpd All commands should be run with ‘root’ user. Run the following command in terminal to ...

  3. PHP array_multisort()

    定义和用法 array_multisort() 函数对多个数组或多维数组进行排序. 参数中的数组被当成一个表的列并以行来进行排序 - 这类似 SQL 的 ORDER BY 子句的功能.第一个数组是要排 ...

  4. C++ - 模板函数须要类型转换时使用友元(friend)模板函数

    模板函数须要类型转换时使用友元(friend)模板函数 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24357301 非模板函数 ...

  5. [JavaEE] Bootstrapping a JavaEE Application

    To bootsrap the application use the following Maven archetype: mvn -DarchetypeGroupId=org.codehaus.m ...

  6. Solidworks如果有两个相似的图纸如何快速复制第二份图纸

    如下图所示,我有两个零件,只有四个孔从螺纹孔改成了通孔(孔的尺寸改大了一点) 我已经画好了带螺纹的图纸   直接另存为,但是不要勾选另存为副本,改一下另存为的名字即可   然后打开这个另存为的工程图, ...

  7. 不能不说的C#特性-表达式树

    不能不说的C#特性-表达式树 2008-09-18 00:00 by 横刀天笑, 17112 阅读, 14 评论, 收藏, 编辑 最近发生了很多很多事情,频繁的搬家.工作上的事情也挺多的,所以博客更新 ...

  8. SQL经典面试题集锦

    1.问题背景 (1)学生表(学号,姓名,年龄,性别) student(S#,Sname,Sage,Ssex) (2)课程表(课程编号,课程名称,教师编号) course(C#,Cname,T#) (3 ...

  9. Linux安装MATLAB

    Linux下的MATLAB在2013a及以后的版本中,就不再支持32位机了.所以32位Linux系统无法安装2013a及以后版本.[1] Linux下安装MATLAB时,需要先配置好JRE,可以参考: ...

  10. 微信JS-SDK怎样使用

    前两天要用到微信JS库的的一句话--wx.closeWindow();可是整个调用过程有点儿泪奔了.. .. 尽管开发人员平台上说的清清楚楚,可是使用起来就是not ok! 一,绑定域名 登录到微信公 ...