问题总结：

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. [K/3Cloud] K/3 Cloud1.0怎样和2.0共存在一台服务器上

    第一步:安装Cloud1.0,创建管理中心,创建业务数据中心,备份管理数据库和业务数据库,并且备份安装目录: 第二步:卸载Cloud1.0,清理安装目录,安装Cloud2.0,创建管理中心,创建业务数 ...

  2. IM聊实现客户端之间信息交互需求文档

    终于放假啦~之前学习太忙很多知识点都没有写博客,可能自己学会了但没有分享给大家,接下来几天我可能把一些学过的东西整理成博客发出来供大家相互学习交流. 需求分析说明书 HuaXinIM聊软件 潘浩 20 ...

  3. So easy

    Problem Description Small W gets two files. There are n integers in each file. Small W wants to know ...

  4. android 请求网络异步载入

    /** * 封装ProecssDialog对话框 * */ public class LoadDialog extends ProgressDialog { private String title ...

  5. Unity3D-碰撞測试

    碰撞測试这个再游戏的开发中是非常有必要的.当敌人的攻击的时候,发生碰撞这时候就会造成一定的伤害,因此我们须要依据受到的伤害对用户的生命值进行控制,因此碰撞的測试是 我们在游戏的开发过程中须要的一种比較 ...

  6. Cocos2d-x可以实现的效果总结

    Cocos2d-x可以实现的效果总结  动作(Actions) move移动:moveto/moveby 从一个位置移动到另外一个位置 从一个位置移动多少数量级 rotate旋转:rotateto/r ...

  7. .NET平台下Redis使用(二)【StackExchange.Redis学习】

    Program.cs内容: using Newtonsoft.Json; using StackExchange.Redis; using System; using System.Data; usi ...

  8. 60.extjs-布局 （在column布局中使用fieldset 和 在fieldset中使用column布局）

    转自:https://blog.csdn.net/snn1410/article/details/8817821/ 在标准的html中,需要把输入项都放到fieldset中,一次来显示分组结构.虽然E ...

  9. Vue.prototype的用法

    基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...

  10. win10系统下，开启数据库远程连接方式

    右键左下角的windows标志,选择控制面板 2.查看方式修改为大图标 3.选择高级设置 4.新建入站规则 5.选择端口然后下一步 6.选择tcp协议,端口输入80,3306 7.选择允许连接 8.规 ...