HTML中Li标签的使用示例,主要用来让新闻标题和日期等左右对齐

2019-09-09 郑州网站建设  

希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决方案。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">    

<html xmlns="">    

<head>  

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

   <title></title>  

<style>  

<!--   

  

#mylist { width:400px; list-style-type:none; margin:0; padding:0; }   

#mylist li span {   

        float:right;    

}   

-->    

</style>    

</head>    

<body>    

<ul id="mylist">  

  

        <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>  

        <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>  

        <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>            

</ul>  

  

</body>    

</html>    

注意: 要把 span 写到Li标签中的最前面,这样在IE6/IE7/FF3.5之前版本中才能保证 span中日期右对齐。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1567.html转载请标明出处,谢谢合作!
标签:
  • 实现
  • 标题
  • ±
  • 希望
  • HTMLLi
  • 左对齐