Heim > Web-Frontend > HTML-Tutorial > IE6下span右浮动换行怎么处理_html/css_WEB-ITnose

IE6下span右浮动换行怎么处理_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:45
Original
1141 Leute haben es durchsucht

IE6下span右浮动换行怎么处理:
在编写新闻列表的时候,一般要求左边是新闻标题,右边是新闻发布时间。时间一般会放在标签中,并将其右浮动。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">li{  list-style-type:none;  font-size:12px;  color:blue;  width:300px;  height:30px;  line-height:30px;  border-bottom:1px dashed blue;}span{  color:red;  width:60px;  height:30px;  float:right;}</style></head><body><div>  <ul>    <li><a href="#">蚂蚁部落欢迎您</a><span>2012-12-13</span></li>    <li><a href="#">大家好,好久不见了</a><span>2012-12-13</span></li>    <li><a href="#">蚂蚁部落</a><span>2012-12-13</span></li>  </ul></div></body></html>
Nach dem Login kopieren

以上代码在IE8或者FF浏览器中是正常的,但是在IE6浏览器中时间却换行了。
解决方案:将标签和标签分别浮动起来,分别左右浮动即可。代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">li{  list-style-type:none;  font-size:12px;  color:blue;  width:300px;  height:30px;  line-height:30px;  border-bottom:1px dashed blue;}a{  width:240px;  height:30px;  float:left;}span{  color:red;  width:60px;  height:30px;  float:right;}</style></head><body><div>  <ul>    <li><a href="#">蚂蚁部落欢迎您</a><span>2012-12-13</span></li>    <li><a href="#">大家好,好久不见了</a><span>2012-12-13</span></li>    <li><a href="#">蚂蚁部落</a><span>2012-12-13</span></li>  </ul></div></body></html>
Nach dem Login kopieren

原文地址:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/419.html

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage