- 1、本文档共2页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
CSS
CSS中如何把Span标签设置为固定宽度
SPAN标签相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。
今天在实现一个效果中加入了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效
后来网上搜索了相关资料,是怎么解释的:
CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。
原因知道后,解决方案也就出来了,如下代码所示:
一、形如
一、形如spanABC/span独立行设置SPAN为固定宽度方法如下:
span{width:60px;text-align:center;display:block;}
实际验证结果:IE6OK,FIREFOX3OK。
一、形如spanABC/spanDEF格式行设置SPAN为固定宽度的方法如下:
span{width:60px;text-align:center; display:block;float:left;}
实际验证结果:IE6OK,FIREFOX3OK。
二、形如ABCspanDEF/spanGH格式行设置SPAN为固定宽度的方法如下:
span{width:60px;text-align:center; display:inline-block;}
实际验证结果:IE6OK,FIREFOX3OK。
提示:完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。
block,inline,inline-block的区别:
display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;display:inline;——类似与a、strong标签的宽高等属性不可定制的元素特性;display:inline-block;——“全”可定制属性的元素特性;
最佳通用方法:span{background-color:#ffcc00;display:-moz-inline-box;display:inline-block;width:150px;
}
问题解决,希望对正在看着篇文章的你有帮助!
补充:1
补充:
1、如何让liAAAspanBBB/span/li里头的BBB靠右对齐且不换行?
答:如果对span使用float属性,总是导致span换到下一行。可以采用下面方法实现同行且居右对齐。
li{position:relative;}
lispan{position:absolute;right:0px;}
即可实现。
您可能关注的文档
最近下载
- 西藏地区电网工程预算定额2013版章节说明第三册输电线路工程.docx
- Unlock2 Unit1 第一篇阅读讲解及答案.pptx VIP
- 飞机场保洁服务方案.pdf VIP
- 肾功能衰竭合并上消化道出血护理查房ppt.pptx VIP
- 由IGBT构成的直流斩波调速系统(110V/10A).doc
- 2024年江苏省南京市鼓楼区中考英语模拟试卷(含解析).docx
- 学生学习理科数学物理等常见问题及解决方法方案.doc
- 流式细胞仪操作指南手册BD_FACSCalibur中文培训手册.pdf
- 公司领导学习中国共产党纪律处分条例心得精选4篇.docx VIP
- 工程质量终身责任承诺书(施工单位).doc VIP
文档评论(0)