新聞列表中標題和日期的左右分別對齊的幾種處理方法

[鏈接原地址](http://blog.csdn.net/fungleo/article/details/50315437)

新聞列表中標題和日期的左右分別對齊的幾種處理方法

前言

在新聞列表中，有標題和日期，然後分別對齊，這種應用場景非常廣泛。而在前端實踐中，其也有很多中佈局方式。很多前端新手在入門時，可能會稍微有點迷茫。

今天我列舉幾個常用的佈局方法，便於新手學習。

這裏只是爲了實現功能效果，所以不額外添加美化類的樣式。只列出核心參數，詳細使用時，請根據自己的情況靈活使用。

效果演示

方法一：日期定位法

這種方法是使用定位，將日期設定到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>

/pre>

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;}

小結

優點：不能說沒有，但實在想不起來。
缺點：如果標題文字比較長，會和日期疊在一起。

總之，不推薦使用。

方法二：日期浮動法

這種方法的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>

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;}

小結

優點： 顯示效果合理，也便於處理標題過長溢出的問題，隱藏溢出即可。兼容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>

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;}

小結

優點： 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>

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;}

小結

優點： 當學新東西咯
缺點： 兼容性差，效果扯淡，不能隱藏標題溢出

總結

浮動法優於定位法優於表格法，至於用不用hack，完全根據項目需要。