艺灵设计

全部文章
×

几种实现文字居左日期居右布局的方法

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-08-29 17:07:34 - 阅: - 评:2 - 积分:0

在浏览众多网页时,相信你一定见过一些带日期的新闻列表,通常布局都是文本居左,日期居右。对于此布局的实现方法有多种,下面就来说说几种常用的方法以及要注意的问题。

方法一日期放到span中,然后span右浮。源码如下:

在线演示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>实现文字居左日期居右布局的方法一</title>
  6. <meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{
  9. margin:0;
  10. padding:0;
  11. }
  12. body{
  13. font-size:12px;
  14. }
  15. a{
  16. color:#666;
  17. text-decoration:none;
  18. }
  19. a:hover{
  20. color:#A4171B;
  21. text-decoration:underline;
  22. }
  23. ul{
  24. list-style:none;
  25. margin:0 auto
  26. }
  27. .list{
  28. border:1px solid #e0e0e0;
  29. width:360px;
  30. }
  31. .list li{
  32. line-height:24px;
  33. border-bottom:1px dashed #dadada;
  34. color:#ccc;
  35. }
  36. .list li span{
  37. float:right;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <ul class="list">
  43. <li><a href="http://www.yilingsj.com/div/2013-08-04/68.html">ie6下双边距的问题</a>
  44. <span>2013-08-04</span>
  45. </li>
  46. <li><a href="http://www.yilingsj.com/div/2013-08-03/67.html">实现ie6下png图片背景透明的几种方法</a>
  47. <span>2013-08-03</span>
  48. </li>
  49. <li><a href="http://www.yilingsj.com/div/2013-08-03/65.html">实现背景半透明及解决文字半透明的方法</a>
  50. <span>2013-08-03</span>
  51. </li>
  52. <li><a href="http://www.yilingsj.com/div/2013-08-02/63.html">display:inline-block 的应用</a>
  53. <span>2013-08-02</span>
  54. </li>
  55. </ul>
  56. <!--下面的写法在ie6下正常显示-->
  57. <ul class="list">
  58. <li><span>2013-08-04</span>
  59. <a href="http://www.yilingsj.com/div/2013-08-04/68.html">ie6下双边距的问题</a>
  60. </li>
  61. <li><span>2013-08-03</span>
  62. <a href="http://www.yilingsj.com/div/2013-08-03/67.html">实现ie6下png图片背景透明的几种方法</a>
  63. </li>
  64. <li><span>2013-08-03</span>
  65. <a href="http://www.yilingsj.com/div/2013-08-03/65.html">实现背景半透明及解决文字半透明的方法</a>
  66. </li>
  67. <li><span>2013-08-02</span>
  68. <a href="http://www.yilingsj.com/div/2013-08-02/63.html">display:inline-block 的应用</a>
  69. </li>
  70. </ul>
  71. </body>
  72. </html>

此写法看似合情合理,但在实际的预览中,总有些浏览器会出现不兼容的情况,例如最让人吐血ie6,ie7下也是不兼容的,下面来看看chrome浏览器以及ie6下显示的效果。
chrome浏览器以及ie6下显示效果
图中直观的反映出ie6中,span与文本竟然神奇的成了2行。这也是一些初步排版者经常范的问题,如果你不知道技巧的话,光看代码是永远也找不到原因的,如果此时将span与文本的位置互换,即“

  1. <li>
  2. <span>2013-08-03</span>
  3. <a href="http://www.yilingsj.com/div/2013-08-03/65.html">实现背景半透明及解决文字半透明的方法</a>
  4. </li>

”,此时再进行ie6下的测试,奇迹出现了,ie6下正常了。
ie6下正常了

 

方法二在方法一的基础上增加对a进行左浮属性即可。源码如下:

在线演示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>实现文字居左日期居右布局的方法二</title>
  6. <meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{
  9. margin:0;
  10. padding:0;
  11. }
  12. body{
  13. font-size:12px;
  14. }
  15. a{
  16. color:#666;
  17. text-decoration:none;
  18. }
  19. a:hover{
  20. color:#A4171B;
  21. text-decoration:underline;
  22. }
  23. ul{
  24. list-style:none;
  25. margin:0 auto
  26. }
  27. .list{
  28. border:1px solid #e0e0e0;
  29. width:360px;
  30. }
  31. .list li{
  32. line-height:24px;
  33. border-bottom:1px dashed #dadada;
  34. color:#ccc;
  35. }
  36. .list li a{
  37. float:left;
  38. }
  39. .list li span{
  40. float:right;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <ul class="list">
  46. <li><a href="http://www.yilingsj.com/div/2013-08-04/68.html">ie6下双边距的问题</a>
  47. <span>2013-08-04</span>
  48. </li>
  49. <li><a href="http://www.yilingsj.com/div/2013-08-03/67.html">实现ie6下png图片背景透明的几种方法</a>
  50. <span>2013-08-03</span>
  51. </li>
  52. <li><a href="http://www.yilingsj.com/div/2013-08-03/65.html">实现背景半透明及解决文字半透明的方法</a>
  53. <span>2013-08-03</span>
  54. </li>
  55. <li><a href="http://www.yilingsj.com/div/2013-08-02/63.html">display:inline-block 的应用</a>
  56. <span>2013-08-02</span>
  57. </li>
  58. </ul>
  59. </body>
  60. </html>

方法三:前面两种方法都用到了span,下面说的这种方法将不用span,代码更简洁。

在线演示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>实现文字居左日期居右布局的方法三</title>
  6. <meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
  7. <style type="text/css">
  8. *{
  9. margin:0;
  10. padding:0;
  11. }
  12. body{
  13. font-size:12px;
  14. }
  15. a{
  16. color:#666;
  17. text-decoration:none;
  18. }
  19. a:hover{
  20. color:#A4171B;
  21. text-decoration:underline;
  22. }
  23. ul{
  24. list-style:none;
  25. margin:0 auto
  26. }
  27. .list{
  28. border:1px solid #e0e0e0;
  29. width:360px;
  30. }
  31. .list li{
  32. line-height:24px;
  33. border-bottom:1px dashed #dadada;
  34. color:#ccc;
  35. text-align:right;
  36. }
  37. .list li a{
  38. float:left;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <ul class="list">
  44. <li><a href="http://www.yilingsj.com/div/2013-08-04/68.html">ie6下双边距的问题</a>
  45. 2013-08-04
  46. </li>
  47. <li><a href="http://www.yilingsj.com/div/2013-08-03/67.html">实现ie6下png图片背景透明的几种方法</a>
  48. 2013-08-03
  49. </li>
  50. <li><a href="http://www.yilingsj.com/div/2013-08-03/65.html">实现背景半透明及解决文字半透明的方法</a>
  51. 2013-08-03
  52. </li>
  53. <li><a href="http://www.yilingsj.com/div/2013-08-02/63.html">display:inline-block 的应用</a>
  54. 2013-08-02
  55. </li>
  56. </ul>
  57. </body>
  58. </html>
转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/div/2013-08-29/72.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 实现文字居左日期居右布局 新闻列表日期布局

上一篇: ie6下双边距的问题   下一篇: 纯css实现三角形方法兼容ie6

相关文章

评论区