我们在写导航或者页面有超链接的地方，有一些是需要超链接的背景和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. web程序定时器

    package com.timer; import java.util.Calendar; import java.util.Date; import java.util.Timer; import ...

  2. Android 开发之集成百度地图的定位与地图展示

    app 应用中,大多数应用都具有定位功能,百度定位就成了开发人员的集成定位功能的首选,近期也在做定位功能,可是发现百度真是个大坑啊, sdk 命名更新了,相关代码却不更新,害得我花费了非常长时间来研究 ...

  3. c语言运算符优先级与while循环案例

    sizeof可以获取数据类型的内存中的大小(字节) #include <stdio.h> #include <stdlib.h> // standared 标准 // inpu ...

  4. 93.快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    转自:https://www.cnblogs.com/wawahaha/p/3946023.html 前言 Angularjs越用越顺手,不仅代码量比jQuery少很多,而且实现思路特别清晰,构建大型 ...

  5. Linux命令详解./configure,make,make install的作用

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GCC ...

  6. VisualStudio UnitTest FrameWork

    当创建单元测试时,Microsoft.VisualStudio.TestTools.UnitTesting的名字控件会添加到测试项目中,该名字控件中包含很多有用的类: 断言类:在单元测试中验证条件 初 ...

  7. Android Fragment中调用getActivity为null的问题

       在使用fragment的时候经常会遇到getActivity()为null的情况.比如我在一个异步网路请求的回调中调用了getActivity()就会出现空指针问题.之前解决这个问题,通常都是直 ...

  8. php获取当前月份的前（后）几个月

    //获取当前月份的前一月 function GetMonth($sign) { //得到系统的年月 $tmp_date=date("Ym"); //切割出年份 $tmp_year= ...

  9. UVA-1602 Lattice Animals 搜索问题（打表+set）

    题目链接 https://vjudge.net/problem/UVA-1602 紫书的一道例题,跟之前的很多题目有很多不同. 本题不像是一般的dfs或bfs这样的搜索套路,而是另一种枚举思路. 题意 ...

  10. CF1005F Berland and the Shortest Paths (树上构造最短路树)

    题目大意:给你一个边权为$1$的无向图,构造出所有$1$为根的最短路树并输出 性质:单源最短路树上每个点到根的路径 ,一定是这个点到根的最短路之一 边权为$1$,$bfs$出单源最短路,然后构建最短路 ...