Home > Web Front-end > HTML Tutorial > How to deal with span right floating line break under IE6_html/css_WEB-ITnose

How to deal with span right floating line break under IE6_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:41:45
Original
1140 people have browsed it

How to deal with span right floating line break under IE6:
When writing a news list, it is generally required that the news title is on the left and the news release time is on the right. The time is usually placed in the tag and floated to the right.
The code is as follows:

<!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>
Copy after login

The above code is normal in IE8 or FF browser, but the time is wrapped in IE6 browser.
Solution: Float the label and label respectively, left and right. The code is as follows:

<!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>
Copy after login

Original address: http://www.51texiao.cn/div_cssjiaocheng/2015/0429/419.html

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template