The date (SPAN) is always on the right side of the text (LI). When the number of characters in the text (LI) reaches the width of Li, it is fixed on the right side of 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 = "#"> frontend development <span> 2014/8/19 </span> </a> </LI> <li> <a href = "#"> front-end development reference manual series <span> </a> </LI> <li> <a href = "# # "> front-end development <span> 2014/8/19 </span> </a> </LI> <li> <a href =" # "> front-end development reference manual series front-end development reference manual series <span> </a> </LI> </ul>

   

• Frontend Development
• Front-end development reference manual series front-end development reference manual Series
• Frontend development frontend Development
• Front-end development reference manual series front-end development reference manual Series

The date (SPAN) is always on the right side of the text (LI). When the number of characters in the text (LI) reaches the width of Li, it is fixed on the right side of Li.