• AG8游戏博客公告栏:深圳AG8游戏专注于SEO优化培训,免费给深圳SEO爱好者提供SEO技术培训教程,兼深圳地区公司网站排名优化等服务!

HTML教程:HTML中Li标签的使用示例

HTML教程 AG8游戏博主 7次浏览 已收录 0个评论 扫描二维码
这篇文章主要介绍了HTML中Li标签的使用示例,主要用来让文章标题和日期等左右对齐,需要的朋友可以参考下
HTML教程:HTML中Li标签的使用示例

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <htmlxmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/>
  5. <title></title>
  6. <style>
  7. <!–
  8. #mylist{width:400px;list-style-type:none;margin:0;padding:0;}
  9. #mylistlispan{
  10. float:right;
  11. }
  12. >
  13. </style>
  14. </head>
  15. <body>
  16. <ulid=“mylist”>
  17. <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>
  18. <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>
  19. <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>
  20. </ul>
  21. </body>
  22. </html>

HTML教程:HTML中Li标签的使用示例

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


深圳SEOAG8游戏博客申明版权隶属:深圳SEO(/)

转载请注明:深圳SEOAG8游戏博客 HTML教程:HTML中Li标签的使用示例

喜欢 (2)
支付宝[]
分享 (0)
AG8游戏博主
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到