我们在写导航或者页面有超链接的地方，有一些是需要超链接的背景和Li的宽度一样的。但是，却没有达到这种效果？为什么？
我们做的效果图：如下

期望的效果：如下

出现这样的原因：由于a是个行内元素，它没有宽高这种概念，a的大小全凭内容撑，所以，为了解决这个问题我们给a这标签加一个display:block;样式，这样就可以达到目的。

样式表

还有一个小技巧，我们在给li前面自定义小图标时候，发现图标离文字特别近，有重合的现象，我们这时候，就可以给li加一个内填充，padding-left：20px； 这样就可以让图标和内容有一定的距离。或者给li的下级标签设置一个margin-left:25px；也是一样的效果。
还有:如果小图标不居中，或者在鼠标hover的时候，位置发生了移动，都可以在background后面添加left center。

另外制作导航栏的技巧

鼠标滑过，解决ul下 li下a的背景与父级Li不同宽的问题的更多相关文章

  1. 鼠标滑过GridView的数据行时修改行的背景颜色

    基本原理可以参考另一篇文章:鼠标滑过table时修改表格行的背景颜色 下面是针对GridView实现该效果的代码:就是编写GridView控件的RowDataBound事件的代码. protected ...

  2. [Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

    转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮 ...

  3. jquery选择div下的ul下的li下的a

    使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...

  4. JS-事件之鼠标、键盘都能控制的下拉选框效果

    <script type="text/javascript"> window.onload=function(e){ var box=document.getEleme ...

  5. li下用了浮动IE6的问题

    li下用了浮动IE6的问题 直接看HTML <ul> <li><a href="#" target="_blank">沃尔沃 ...

  6. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  7. 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

    html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...

  8. XE6移动开发环境搭建之IOS篇（5）：解决Windows和虚拟机下Mac OSX的共享问题（有图有真相）

    网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 在安装XE6 PAS ...

  9. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. sql系列（基础篇）-第一章 关于sysdate

    第一章 主要的SQL语句  1. 查询数据库系统时间,常以server默认的格式进行显示(依据数据库的字符集而定): 注意:dual 为数据库中的虚表,隶属于管理员 sys 用户,但全部的用户都能够訪 ...

  2. c# 获取文件夹下面所有文件夹列表

    方法一: string dirPath = @"D:\App1"; List<string> dirs = new List<string>(Directo ...

  3. javascript系列-class5.数组

    转载请标明出处!   栈堆结构:   堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除.   栈:存放的是路径:容量有限(在一开始被定义之后就不会改变了): ...

  4. POJ 3299 模拟

    水题,但是WA了一屏--- swap的时候忘了把读入的数字也swap了---------..[尴尬] // by SiriusRen #include <cmath> #include & ...

  5. Ubuntu16.04下Mongodb官网安装部署步骤（图文详解）（博主推荐）

    不多说,直接上干货! 在这篇博客里,我采用了非官网的安装步骤,来进行安装.走了弯路,同时,也是不建议.因为在大数据领域和实际生产里,还是要走正规的为好. Ubuntu16.04下Mongodb(离线安 ...

  6. 新疆大学（新大）OJ xju 1006: 比赛排名 第二类斯特林数+阶乘

    题目链接:http://acm.xju.edu.cn/JudgeOnline/problem.php?id=1006 第二类斯特林数: 第二类Stirling数实际上是集合的一个拆分,表示将n个不同的 ...

  7. 51nod 1272 最大距离 O（nlog（n）） ， 快排 ， 最大连续子串

    题目: 解法:排序,把值小的和索引小的放在前面,记录一下之前索引最小的就可以了. 没什么可以讲的,上代码吧: #include <bits\stdc++.h> using namespac ...

  8. C语言中的作用域、链接属性与存储属性

    C语言中的作用域.链接属性与存储属性 一.作用域(scope) 代码块作用域 表示{}之间的区域,下例所示,a可以在不同的代码块里面定义. #include<stdio.h> int ma ...

  9. + (void)initialize vs 静态构造方法

    在继承体系中,多个子类的引用,父类缺省执行一次: 特殊情况: 1)子类没有实现.调用父类方法: 2)子类显示调用父类: 3)存在分类实现,分类实现覆盖本体. Initializes the class ...

  10. 来，我们来聊聊怎么学好3dMax三维建模这款软件

    效果图公司近年来的发展体现了流行3D技术,而3D技术的应用也越来越广泛,3D为电脑效果图制作的主力.室内效果是设计师进行设计后所达到的效果,除了通常采用的方法外,还应该积极地找寻一种适合的教学方法,培 ...