css使標題右側區塊更多教程

一般我們都會把“更多”這個連結放在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後，還是能保持一個良好的閱讀形式而不至引起歧義。

演示：

執行程式碼框

/* */