我们在写导航或者页面有超链接的地方，有一些是需要超链接的背景和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. OPENWRT中SSH免密钥登陆（具体步骤）

    通过使用ssh-keygen生成公钥,在两台机器之间互相建立新人通道极客. 如果本地机器是client,远程机器为server. 1.使用ssh-keygen生成rsa keygen(在这里会覆盖曾经 ...

  2. IP地址正則表達式

    正則表達式对字符进行格式化匹配.一句指令完毕推断. IP地址格式   x.x.x.x x 表示0~255的数字 分三种情况 A.          250-255:特点:三位数,百位是2,十位是5,个 ...

  3. Android生命周期里你也许不知道的事

    Android生命周期预计连刚開始学习的人都再熟悉只是的东西了,但这里我抛出几个问题.也许大家曾经没有想过或者可能认识的有些错误. 一.当A启动B时,A和B生命周期方法运行的先后顺序是如何的?当按返回 ...

  4. m_Orchestrate learning system---四、多看参考文档很多事情很轻松就解决了

    m_Orchestrate learning system---四.多看参考文档很多事情很轻松就解决了 一.总结 一句话总结:多看参考文档啊 1.面包屑导航如何实现? 1 <ol class=& ...

  5. jar 包的认识与处理、jar 文件 war 文件以及 ear 文件

    1. jar 包 将 jar 包解压,其实是该类(.java)编译好的(.class)文件. 包路径 package 多层嵌套的 packages META-INF 文件夹 2. 常用 jar 包及其 ...

  6. Linux就该这么学 20181005(第七章磁盘管理)

    参考链接https://www.linuxprobe.com lsblk检测硬盘使用情况 RAID 技术把多块物理硬盘设备(至少两块)通过硬件或软件的方式串联在一起,组成一个大的卷组,并将数据依次写入 ...

  7. JavaScript学习——使用JS完成全选和全不选操作

    1.我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选,显示效果如下: 2.步骤分析: 第一步:确定事件(onclick)并为其绑定一个函数(事件绑定到编号前面的复选框里面) 第二步 ...

  8. 【转载】犀利的 oracle 注入技术

    介绍一个在web上通过oracle注入直接取得主机cmdshell的方法. 以下的演示都是在web上的sql plus执行的,在web注入时 把select SYS.DBMS_EXPORT_EXTEN ...

  9. Struts1、Struts2、Hibernate、Spring框架工作原理介绍

    Struts1工作原理 Struts1工作原理图 1.初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总控 ...

  10. HDU 1043 Eight (A*算法)

    题目大意:裸的八数码问题,让你输出空格的一条合法移动路径 首先利用康托展开对排列编号,可以预处理出排列,就不必逆展开了 然后利用A*算法求解 A*算法是一种启发式搜索,具体实现要用到优先队列/堆,不同 ...