" id="b1img" alt="米课”N+1“思维建站-非官方免费技术支持,Wordpress/Zencart/Opencart建站、SEO" title="米课”N+1“思维建站-非官方免费技术支持,Wordpress/Zencart/Opencart建站、SEO">
  • " alt="米课”N+1“思维建站-非官方免费技术支持,Wordpress/Zencart/Opencart建站、SEO" title="米课”N+1“思维建站-非官方免费技术支持,Wordpress/Zencart/Opencart建站、SEO" />
  • " alt="Windows/Linux服务器运维技术支持 环境搭建、应用发布、服务器管理、虚拟化、云计算" title="Windows/Linux服务器运维技术支持 环境搭建、应用发布、服务器管理、虚拟化、云计算" />
  • " alt="高校/小型企业网络运维与建设免费技术支持,网络规划、网络优化、故障排除、网络管理" title="高校/小型企业网络运维与建设免费技术支持,网络规划、网络优化、故障排除、网络管理" />

解决span float:right不能右对齐而是换行显示

程序设计2010-07-10 itlogger阅读(1,144) 评论(1)
例子:<h1 style=”display:inline;”>如何解决</h1><span style=”float:right;”>span右对齐的问题</span>这样的写法经过测试在IE8和firefox浏览器里可以正确显示在同一行,而在360浏览器中”span右对齐的问题”这几个字却显示到下一行的最右边,原因和解决方法如下:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥
也就是说,你的span是float:right,但是前面h1的内容”如何解决”还是float:none,如果要<span>前后文字占据同一行,一般有两个解决方法:
1、把<sapn style=”float:right”>span右对齐的问题</span>代码置于<h1>前
<sapn style=”float:right;”>span右对齐的问题</span>:<h1 style=”display:inline;”>如何解决</h1>
2、给前面的文本设置float属性
<h1 style=”display:inline;float:left;”>如何解决</h1><span style=”float:right;”>span右对齐的问题</span>
备注:今日发现在IE6下上面的代码还是不能很好的显示,IE6解决方法如下:
保持H1在前,span float:right在后,给span添加一个_margin-top:-20px;(数值根据需要自己调整),即
<h1 style=”display:inline;_margin-top:-20px;”>如何解决</h1><span style=”float:right;”>span右对齐的问题</span>
转载请注明 :IT樵客
文章地址:http://www.itlogger.com/program/1191.html
标签:, ,

One thought on “解决span float:right不能右对齐而是换行显示

  1. 谢谢了!好用!

发表评论

电子邮件地址不会被公开。 必填项已用*标注