日期(span)始终在文字(li)的右侧，当文字(li)字数达到li的宽度则固定在li的右侧

标签：style   blog   color   os   io   ar   2014   div   log   

• ul { list-style: none; width: 300px; margin-top: 10px; padding: 0; font:12px/2.5 arial }
  li { height: 30px; margin-bottom: 10px; border: 1px solid #red; overflow: hidden; }
  a { display: inline-block; padding-right: 60px; position: relative; }
  span { position: absolute; right: 0; top: 0; }

  <ul>
    <li><a href="##">前端开发<span>2014/8/19</span></a></li>
    <li><a href="##">前端开发参考手册系列前端开发参考手册系列<span>2014/8/19</span></a></li>
    <li><a href="##">前端开发前端开发前端开发<span>2014/8/19</span></a></li>
    <li><a href="##">前端开发参考手册系列前端开发参考手册系列<span>2014/8/19</span></a></li>
  </ul>

   

• 前端开发2014/8/19
• 前端开发参考手册系列前端开发参考手册系列2014/8/19
• 前端开发前端开发前端开发2014/8/19
• 前端开发参考手册系列前端开发参考手册系列2014/8/19

日期(span)始终在文字(li)的右侧，当文字(li)字数达到li的宽度则固定在li的右侧

标签：style   blog   color   os   io   ar   2014   div   log   

原文地址：http://www.cnblogs.com/liujin0505/p/3930557.html