我们在写导航或者页面有超链接的地方，有一些是需要超链接的背景和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. ZOJ 1696 Viva Confetti 计算几何

    计算几何:按顺序给n个圆覆盖.问最后能够有几个圆被看见.. . 对每一个圆求和其它圆的交点,每两个交点之间就是可能被看到的圆弧,取圆弧的中点,往外扩展一点或者往里缩一点,从上往下推断有没有圆能够盖住这 ...

  2. BZOJ 1264: [AHOI2006]基因匹配Match 树状数组+DP

    1264: [AHOI2006]基因匹配Match Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种碱基排列而成(地球 ...

  3. HDU 3966 Aragorn's Story 树链剖分+BIT区间修改/单点询问

    Aragorn's Story Description Our protagonist is the handsome human prince Aragorn comes from The Lord ...

  4. Oracle11g数据库导入Oracle10g数据库操作笔记

    一.在11g服务器上,使用expdp命令备份数据 EXPDP USERID='SYS/sys@daggis as sysdba' schemas=oa directory=DATA_PUMP_DIR ...

  5. Codeforces 659F Polycarp and Hay 并查集

    链接 Codeforces 659F Polycarp and Hay 题意 一个矩阵,减小一些数字的大小使得构成一个连通块的和恰好等于k,要求连通块中至少保持一个不变 思路 将数值从小到大排序,按顺 ...

  6. Kettle学习系列之Kettle的起源

    不多说,直接上干货! Kettle起源于十年以前,本世纪初.当时啊,ETL工具千姿百态,比较流行的工具有50个左右,ETL框架数量比工具还要多些. 根据这些工具的各自起源和功能可以分为以下4种类型,如 ...

  7. 在 Microsoft Word 文档 中粘贴代码实现语法高亮的方法

    1.下载notepad++. 2.将代码粘贴进notepad++,或者直接用notepad++打开. 3.点击顶栏 ===> 插件 ===> NppExport ===> cope ...

  8. mongodb报错：connection refused because too many open connections: 819

    问题: 发现mongodb无法连接,查看mongodb日志,出现大量的如下报错: [initandlisten] connection refused because too many open co ...

  9. C# treeview绑定

    protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            ...

  10. apache源码编译安装

    源码安装apche 下载apache的源码包文件 访问http://mirror.bit.edu.cn/apache/httpd/,复制如下gz文件的链接地址,并使用wget下载到本地 wget -P ...