若制作导航栏时,使用列表li 的定义时,若想加上一个背景图 ,这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;},则浏览器会无视后面的高和宽属性的定义,按照默认字体大小来显示!
   解决的方法为,将display:inline ,改成 display:block; 和加上float:left; 即可正常,完整的应为:li{display:block; float:left;  margin-right:5px; width:83px; height:30px; } 这样定义的宽和高度都小效,所以可以再添加对应的背景图片了

display:inline 遇上 li 无效? why?的更多相关文章

  1. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  2. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  3. Swift Tips - 当 Swift 遇上 CocoaPods

    CocoaPods 作为 iOS 开发的包管理工具,几乎成为了 Objective-C 的行业标准.它为我们提供了非常方便的包管理功能.而苹果正式发布 Swift 语言也已经有半年多时间了,Swift ...

  4. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. display inline or block

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  7. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

随机推荐

  1. webstorm 文件历史找回~ 恢复正确状态~

    事情的经过时这样的~  我写好的HTML 我新下载了sublime text3 用这个打开了下 结果都变乱码了~ 大概截个图 都恢复了 就不瞎搞了 webstorm有错误的记录都有真好~ 恢复的具体操 ...

  2. [转] 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2出现0x80072f8a未指定的错误

    原文地址:安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2出现0x80072f8a未指定的错误 最近DotNetCore更新到了1.0.1,Azure tools ...

  3. linux网络:常用命令(一)

    1.ifconfig  可以查看Linux的网卡情况 ifconfig eth0 查看 eth0的信息 给一块网卡设置多个ip地址: ifconfig eth0:0 192.168.1.12 255. ...

  4. c# 字符串前加@

    @在c#中为强制不转义的符号,在里面的转义字符无效. 例如:Console.WriteLine("你好\t吗?"); Console.WriteLine(@"你好\t吗& ...

  5. solr多条件查询(二)

    由于现在的 需求很变态需要N多条件的叠加,本人就用了一天时间摸索加求助,终于参透出这个q和fq的强大之处. 需求如下图,有三种关系:并且.或.不含 1.如果是或者也就是改变的q的查询条件: 2.如果是 ...

  6. 关于高性能Web服务的一点思考

    下面这些概念对于专业做性能测试的会比较熟悉,但是对于开发人员不一定都那么清楚. 并发用户数: 某一时刻同时请求服务器的用户总数,通常我们也称并发数,并发连接数等. 吞吐率:对于web服务器来说就是每秒 ...

  7. PHP基础之 错误处理 及 异常处理

    错误处理: 1.使用die()方法,结束语句的执行,并输出错误消息 2.自定义错误和错误触发器 自定义错误处理函数(系统有默认的错误处理函数,自定义的错误处理会覆盖默认的处理函数) ========= ...

  8. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

  9. 【bzoj3573】[HNOI2014]米特运输

    题目描述 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城 ...

  10. 如何解决Mac里面解压后文件名乱码问题

    如果你把Mac当成你的主要工作机器,而你的同事用的都是Windows,有时候交换文档就是一件很痛苦的事,比如今天要说到的问题:当同事传给你一个zip文件,结果你拿过来解压后发现里面有些文件的文件名如果 ...