我们在写导航或者页面有超链接的地方，有一些是需要超链接的背景和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. Android中文API-ViewStub

    ViewStub控件是一个不可见,0尺寸得惰性控件.当ViewStub控件设置可见,或者调用inflate(),并运行完毕之后,ViewStub所指定的layout资源就会被载入.这个ViewStub ...

  2. linux数据库升级

    转自:老左博客:http://www.laozuo.org/6145.html 老左今天有在帮朋友的博客搬迁到另外一台VPS主机环境,其环境采用的是LLSMP架构的,原先的服务器采用的是LNMP网站环 ...

  3. Get Client IP

    How to get a user's client IP address in ASP.NET? Often you will want to know the IP address of some ...

  4. 用exp命令按用户导出的DMP文件缺少表，某些表是空表

    1.用以下这句查找空表并生成执行命令 select 'alter table '||table_name||' allocate extent;' from user_tables where num ...

  5. VC下加载多种格式图片的方法总结IPicture, CxImage, CImage(AtlImage), CPictureEx

    尽管VC有提供相应的API和类来操作bmp位图.图标和(增强)元文件,但却不支持jpg.gif和png等格式的图片,而这几种格式却是常常要用到的.这里我给大家介绍两种办法来操作这些格式的图片. 1.用 ...

  6. SharePoint 使用Expression Web 设计网站

    创建好网站以后可就可以开始发布了 possible causes : 1.The web server may not hava the FrontPage Server Extensions ins ...

  7. gui编程实战——qq聊天界面1

    public class testDemo_2 extends JFrame{ JTextArea jta=null; //多行文本框组件 JScrollPane jsp=null; //滚动文本框 ...

  8. HDU 1556 Color the ball【树状数组】

    题意:给出n个区间,每次给这个区间里面的数加1,询问单点的值 一维的区间更新,单点查询,还是那篇论文里面讲了的 #include<iostream> #include<cstdio& ...

  9. nginx的location 匹配的规则问题

    正则解释: ~ #匹配一个正则匹配,区分大小写~* #匹配一个正则,不区分大小写^~ #普通字符匹配,如果该选择匹配不匹配别的选项,一般用来匹配目录= #精确匹配 匹配案例:location = / ...

  10. 函数式编程－只用"表达式"，不用"语句"()

    把函数当作普通的运算符使用. 2. 只用"表达式",不用"语句"() "表达式"(expression)是一个单纯的运算过程,总是有返回值: ...