加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

span右对齐换行显示的三种解决方法

(2014-02-12 16:07:42)
标签:

css

span

a

换行

it

分类: C#-Asp.Net

span右对齐换行显示的三种解决方法

问题描述:

我们常常在做网站的时候会div,li,span中加入span右对齐,例如:在标签中我们会加入时间让它右对齐,以增加网页的可读性,如下代码:

http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/487c3ffc5266d016d36ca190972bd40734fa35bd.jpg

火狐跟IE8都正常


http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/fb2530004a90f60371b2a3ff3912b31bb151edb4.jpg

在IE6下不正常,出现错位现象

http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/c2bc3950f81986183f36d03c4aed2e738ad4e6b9.jpg

为什么会出现这种情况?系统默认的标签为什么不会出现错位现象?

原来分析:当非float元素和float元素在一起的时候,假如非float元素在前,那么float元素将被排拆,所以,即使span是float:right,但文本显示是float:none,所以span将被排斥。

解决方法一


http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/7e14862542a7d9332efedbcbad4bd11372f00158.jpg

问题得到解决。

细心检查可以发现我们的网站也是默认取用这种方法的,把span先于文本显示的,如下图:

http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/54b81ccbd1c8a7867e6f75b66709c93d71cf506d.jpg

解决方法二

我们并不需要修改span排在文本前面,在a属性中加入一个浮动属性,让其成为浮动元素

http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/2dc7bda95edf8db1507c43dc0923dd54574e7464.jpg

这样也可以解决错位的问题


解决方法三

http://hiphotos.baidu.com/%EF%BF%BD%EF%BF%BD%C7%B0%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD/pic/item/c2be62c5b74543a97956c5741e178a82b8011465.jpg

第三和第二种方法没有第一种方法简单,为了网页代码的简洁性,建议采用第一种方法。

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有