css实现文字居左日期居右排列最简单的网页代码

最新推荐文章于 2024-09-19 21:21:27 发布

原创最新推荐文章于 2024-09-19 21:21:27 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种简洁高效的CSS布局方法，通过简单的样式调整即可实现新闻列表中标题居左显示而日期居右的效果。这种方法不仅减少了代码量，还保持了良好的页面布局效果。

含有日期的新闻列表，会把日期放在右侧，怎么解决呢？
方法一：
在列表中设置两个div,并设置浮动为左浮动和右浮动，相信大家都比较了解。
代码
<ul>
    <li>
      <div style="float:left">新闻标题</div> <div style="float:right">2010-7-6</div>
     </li>
</ul>
但是这样写代码太多了。
ul li{ list-style-type:none;

最简单的实现方法：
样式:
<style>
    ul li{ list-style-type:none; height:25px; line-height:25px; text-align:right;}
     ul li a{ float:left;}
</style>
代码：
<ul>
   <li><a href="#"> css实现文字居左日期居右排列最简单的网页代码</a>[2010-7-6]</li>
   <li><a href="#"> css最简单的网页代码</a>[2010-7-6]</li>
   <li><a href="#"> css实现文字居左日期居右排列最简单的网页代码</a>[2010-7-6]</li>
</ul>