css实现文字居左日期居右排列最简…

本文介绍了一种简洁的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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值