首页 > 代码库 > 日期(span)始终在文字(li)的右侧,当文字(li)字数达到li的宽度则固定在li的右侧

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

  • 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>

     

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

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