新闻列表中标题和日期的左右分别对齐的几种处理方法

Posted 2020-08-12 2350305682

前言

在新闻列表中，有标题和日期，然后分别对齐，这种应用场景非常广泛。而在前端实践中，其也有很多中布局方式。很多前端新手在入门时，可能会稍微有点迷茫。

今天我列举几个常用的布局方法，便于新手学习。

这里只是为了实现功能效果，所以不额外添加美化类的样式。只列出核心参数，详细使用时，请根据自己的情况灵活使用。

效果演示

方法一：日期定位法

这种方法是使用定位，将日期设定到right:0;top:0的位置。

DOM结构

<div class="news_box">
    <ul>
        <li><a href="#">this is a news title 1</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 2</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 3</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 4</a><span>2015-12-15</span></li>
    </ul>
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

css代码

.news_box {width: 400px;margin: 100px auto;}
.news_box li {position: relative;height: 24px;line-height: 24px;overflow: hidden;}
.news_box li span {position: absolute;right: 0;top: 0;}

• 1
• 2
• 3

小结

优点：不能说没有，但实在想不起来。 
缺点：如果标题文字比较长，会和日期叠在一起。

总之，不推荐使用。

方法二：日期浮动法

这种方法的dom结构和上面的不一样，它把日期给提前了。（上面的方法用这个DOM结构也是可以的。但是，上面的那种DOM结构更加符合html语义）。

DOM结构

<div class="news_box">
    <ul>
        <li><span>2015-12-15</span><a href="#">this is a news title 1</a></li>
        <li><span>2015-12-15</span><a href="#">this is a news title 2</a></li>
        <li><span>2015-12-15</span><a href="#">this is a news title 3</a></li>
        <li><span>2015-12-15</span><a href="#">this is a news title 4</a></li>
    </ul>
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

css代码

.news_box {width: 400px;margin: 100px auto;}
.news_box li {height: 24px;line-height: 24px;overflow: hidden;}
.news_box li span {float: right;padding-left: 10px;}

• 1
• 2
• 3

小结

优点： 显示效果合理，也便于处理标题过长溢出的问题，隐藏溢出即可。兼容IE6+所有浏览器。 
缺点： DOM结构不合理。

这个方法我常用。虽然DOM结构不合理，但是css没有使用任何hack。

方法三：日期浮动法hack版

上面的方法虽然解决了问题，但是毕竟dom结构不是我们希望的。那么，可以不可以在DOM结构为先标题后日期的情况下，实现想要的效果呢？

可以。

DOM结构

<div class="news_box">
    <ul>
        <li><a href="#">this is a news title 1</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 2</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 3</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 4</a><span>2015-12-15</span></li>
    </ul>
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

css代码

.news_box {width: 400px;margin: 100px auto;}
.news_box li {height: 24px;line-height: 24px;overflow: hidden;}
.news_box li span {float: right;*margin-top: -24px;}

• 1
• 2
• 3

小结

优点： dom结构正常，兼容性强，hack是为了处理ie6\7，效果优秀。 
缺点： 使用了hack。当然，现在不考虑IE6\7的项目，两个浮动法，都是OK的。

方法四：模拟表格法

这种方式完全不推荐。但是，可以作为知识点进行学习，在某些场合，这种方法是很有用的。但是在本帖的例子中，这个方法是不合适的。

DOM结构

<div class="news_box">
    <ul>
        <li><a href="#">this is a news title 1</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 2</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 3</a><span>2015-12-15</span></li>
        <li><a href="#">this is a news title 4</a><span>2015-12-15</span></li>
    </ul>
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

css代码

.news_box {width: 400px;margin: 100px auto;}
.news_box li {line-height: 24px;display: table;width: 100%;}
.news_box li span,.news_box li a {display: table-cell;}
.news_box li span {text-align: right;}

• 1
• 2
• 3
• 4

小结

优点： 当学新东西咯 
缺点： 兼容性差，效果扯淡，不能隐藏标题溢出

总结

浮动法优于定位法优于表格法，至于用不用hack，完全根据项目需要。