css使標題右側區塊更多教程
來源：文萃谷 8.41K
一般我們都會把“更多”這個鏈接放在H標籤中，然後用到相對定位來實現。可以使用負margin來完成這個效果，而且更加簡單。另外，針對於語義方面，我稍作修改，一般我們都是將鏈接套在H標籤中，我將之獨立到外部，這樣既便在禁用CSS後，還是能保持一個良好的閲讀形式而不
標題右側“更多”的.實現
曾經做上圖所示的效果,會使用到position來相對定位到h2標籤的右側.這樣的做法,代碼確實會多好幾行. 其實可以用個笨一點的辦法來實現的：
譬如html代碼如下：
< h2>< a h ref="#" >標題< /a> < span>更多…< /span> < /h2>
使用potsition的css差不多如下：
h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
這樣才能實現更多在右側.其實真的還可以更簡單:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實只是利用了margin-top 的負數來實現,因為默認的float會換行到h2標籤下面去，所以讓它自個跳上去。大致代碼就是如此了,是不是很簡單?我説很簡單嘛！由於很簡單,所以就不放出單獨的測試頁面了.
一般我們都會把“更多”這個鏈接放在H標籤中，然後用到相對定位來實現。可以使用負margin來完成這個效果，而且更加簡單。另外，針對於語義方面，我稍作修改，一般我們都是將鏈接套在H標籤中，我將之獨立到外部，這樣既便在禁用CSS後，還是能保持一個良好的閲讀形式而不至引起歧義。
演示：
運行代碼框
/* */
