网站片头动画用什么软件做的,烟台网站优化公司,重庆网站seo营销模板,网站建设论文ppt在默认的情况下#xff0c;利用 css 样式对 span 进行宽度设定是无效#xff0c;但有时为了某种排版的要求#xff0c;需要对 span 进行宽度设定#xff0c;那么如何在 html 中利用 css 样式设定 span 的宽度#xff1f;思路#xff1a;这看上去是个很简单的问题#xf… 在默认的情况下利用 css 样式对 span 进行宽度设定是无效但有时为了某种排版的要求需要对 span 进行宽度设定那么如何在 html 中利用 css 样式设定 span 的宽度 思路这看上去是个很简单的问题似乎用 style 中的 width 属性就可以。 然而通过试验以后发现无论是在 Firefox 还是 IE 中都无效。 在 CSS2 的标准中查阅关于 width 的定义我们可以发现原来 css 中的 width 属性并不总是有效的如果对象是 inline 对象width 属性就会被忽略Firefox 和 IE 都遵循了这个标准。 1、初步解决 span 宽度方案修改 span 为 block 类型。 在 span 的 css 中增加 display 属性将 span 设置为 block 类型。span { background-color: #fc0; display: block; width: 150px;
} 这样宽度就可以实现了不过这样做也把前后文字隔在不同行里面这样其实相当于把 span 完全变成了 div。 2、进一步解决 span 宽度方案 然后我们再增加一个 css 属性 float这样的确在某种条件下能解决问题。span {background-color: #fc0;display: block;float: left;width: 150px;
} 然而如果 span 前面没有文字那这样做的确是可行的但是如果有字前后文字就会连在一起而 span 跑到了第二行。 其实在 html 的各种 element 中的确有既是 inline又能够设定宽度的情况存在例如button 对象就可以很好的在文字中间出现并且设定宽度。 能不能让 span 也像 button 那样显示呢通过 CSS2 标准中 display 的定义和 inline 对象的解释发现 CSS2 标准的制定者把所有的 element 在是否属于 inline 上做了非此即彼的规定要么是 inline要么是 block没有制定 button 那样既是 inline又可以像 block 那样设置宽度的属性值。 在 CSS2.1 标准草案中 display 的定义中增加了一个叫 inline-block 的属性值针对的恰好是我们面对的这种情形。那么再看看各种浏览器的对应情况Firefox通过 display 的文档了解到inline-block 在未来的 Firefox 3 中会实现。通过 Mozllia 扩展属性参考了解到在 Firefox 3 以前的版本例如现在的 Firefox 2 中可以用 -moz-inline-box 达到同样的效果。IE通过 MSDN 中的 display 文档了解到inline-block 已经实现。实际测试发现 IE 6.0 以后都没问题。 3、完美的解决 span 宽度方案 下面代码的 css 定义完美解决了 span 的宽度设置问题。由于浏览器通常对不支持的 css 属性采取忽略处理的态度所以最好将 display:inline-block 行写在后面这样在 Firefox 里面如果到了未来的Firefox 3这一行就能起作用代码可以同时兼容各种版本。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml headtitleTest Span/titlestyle typetext/cssspan {background-color: #fc0;display: -moz-inline-box;display: inline-block;width: 150px; }/style/headbodyHCONLY视觉网站设计spanwidth/span营销策划/body
/html 转载于:https://blog.51cto.com/wuyongzhiyi/1429645
