艺灵设计

全部文章
×
当前位置：首页 >> div + css>>几种实现文字居左日期居右布局的方法

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

作者:艺灵设计　-　来源: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>
转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-29/72.html

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

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

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

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

相关文章

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

2016淘宝完全自定义css工具淘宝天猫2016最新css悬浮工具淘宝基础版店铺自由编辑页头页面工具淘宝基础版店铺自主授权工具淘宝基础版店铺真正去除页头10px工具2016淘宝天猫全屏全家桶工具淘宝基础版店铺自由编辑页尾工具为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。