当设置display:inline;时li的宽度无效的解决方法
来源:互联网 发布:fifa online3网络错误 编辑:程序博客网 时间:2024/04/29 16:41
若制作导航栏时,使用列表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 的定义时,若想加上一个背景图 ,这时候若定义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; 它会跟在它的前面的同辈元素一起显示在一行上,具体的宽度值等于父元素的宽度减去它前面的同辈元素。
0 0
- 当设置display:inline;时li的宽度无效的解决方法
- 表格Table宽度设置无效的解决方法
- 表格Table宽度设置无效的解决方法
- [HTML]表格Table宽度设置无效的解决方法
- 当gridview宽度超过屏幕分辨率宽度时,通过“编辑列”设置列宽没有效果的解决方法
- ie下display: inline-block;无效的bug
- 礼拜三log~CSS控制文本不换行+省略号 & li宽度无效的解决方法 & 在js中获取后台变量
- DIV 设置 display:inline-block 导致 DIV 对不齐的解决方法
- DIV 设置 display:inline-block 导致 DIV 对不齐的解决方法
- 关于设置display:inline-block,使两个div产生空隙的解决方法
- display:inline的用法
- display:inline的用法
- display:inline的用法
- li标签的display的inline-block在IE6中的显示问题
- html5 span设置宽度无效的问题
- 解决table设置宽度无效的问题
- display:inline、display:block和display:inline-block的区别
- Table中的td,th用了Colspan或者Rowspan之后,设置宽度无效的解决方法
- 学习FLASH制作动画的关键技术点
- 算法(第四版)学习笔记之java实现基于堆的优先队列
- error LNK2005: __c_exit already defined in libcmt.lib(crt0dat.obj)
- rabbitmq文章源
- logistic 函数(logistic function)sigmoid函数
- 当设置display:inline;时li的宽度无效的解决方法
- 在网页中调用iOS客户端
- Android 四大组件之Broadcast receiver
- GO-读取网页内容(获取外网IP地址)
- IOS事件传递及响应过程
- 认识COFF文件格式
- iOS 小技巧及注意点(OC)
- Windows网络编程:阻塞模式下的Socket编程
- phpCMS二次加密