问题总结：

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. H - Parity game 并查集

    Now and then you play the following game with your friend. Your friend writes down a sequence consis ...

  2. Codeforces Round #403(div 2)

    A =w= B 题意:一个数轴上有n个整点,每个点都有一个速度,选一个点让他们集合,使得时间最少. 分析: 直接三分 C 题意:给定一棵树,任意两个距离小等于二的点不能染相同的颜色,求最小颜色数和染色 ...

  3. SpringMVC断言--Assert

    Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查,如果入参不符合要求,方法将通过抛出异 ...

  4. Android 四大组件学习之Activity六

    本节学习Activity的状态保存与恢复. 先用样例開始: 布局文件主要是实现例如以下.大家自行编写 Activity逻辑代码: public class FiveActivity extends A ...

  5. C#之反射（PropertyInfo类）

    1.引入命名空间:System.Reflection:程序集:mscorlib(在mscorlib.dll中) 2.示例代码(主要是getType().setValue().getValue()方法) ...

  6. Android之实现ViewPager+Fragment左右滑动

    近期看新闻发现新闻的页面是能够左右滑动的.于是自己就好奇起来了,之前做过ViewPager展示图片,在想怎么载入页面呢?研究了一下.发现就是加入了Fragment,废话不多说,揭秘奥秘的时候到了. 使 ...

  7. js实现存取Map结构的数据

    //控制关联表单元素是否显示 var relateItemMap = {}; for(var i=0; i<formAttributeItemList.length; i++){ var ite ...

  8. P4700 算

    P4700 算 时间: 1000ms / 空间: 125829120KiB / Java类名: Main 背景 zhx和他的妹子出去玩. 描述

  9. android-----JNI中的log打印【转】

    本文转载自:http://blog.csdn.net/zengraoli/article/details/11644815 1. 导入log头文件 在你使用的 .c/ .cpp 文件中 导入 log. ...

  10. Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/poi/util/POILogFactory

    Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/poi/util/POILogFacto ...