設定連結<a>的尺寸

admin發表於2018-12-21

點選連結<a>元素能夠實現頁面跳轉效果，是最為常用的元素之一。

實際應用中，可能會因為佈局或者美觀等需求，要設定給連結設定一個尺寸。

很多初學者可能會發現，雖然已經設定了尺寸，且程式碼毫無問題，但是頁面表現卻不盡如人意。

看如下程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a{
  width:120px;
  height:80px;
  border:1px solid red;
  color:black;
  text-decoration:none
}
</style>  
</head>
<body>
<a href="http://www.softwhy.com">螞蟻部落</a>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/21/003957du1z8yfz1urdr81g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，css設定的連結a的尺寸，且程式碼毫無語法錯誤，但是並沒有生效。

這是因為連結a元素是內聯元素，width和height屬性對內聯元素無效。

那麼首先將其轉換為塊級元素或者內聯塊級元素，就可以設定它的尺寸了。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a{
  width:120px;
  height:80px;
  border:1px solid red;
  color:black;
  text-decoration:none;
  display:block;
}
</style>  
</head>
<body>
<a href="http://www.softwhy.com">螞蟻部落</a>
</body>
</html>

通過display:block將連結<a>元素轉換為塊級元素。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/21/004041q5k7t2201ou20o10.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

成功設定連結<a>元素尺寸，將內聯元素轉換為塊級元素或者塊級內聯元素的方式有很多。

本文不做介紹，具體參閱塊級元素與內聯元素相互轉換一章節。

更多關於連結<a>的知識參閱如下幾篇文章：

（1）.HTML <a> 標籤一章節。

（2）.CSS 設定連結樣式一章節。

內聯元素還有一個重要的特點需要注意，就是不能夠設定上下內外邊距。

不是說設定後不生效，而是會出現一些難以預料的效果，但是能夠正常設定內聯元素的左右內外邊距。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a{
  width:120px;
  height:40px;
  border:1px solid red;
  color:black;
  text-decoration:none;
  padding:10px;
}
</style>  
</head>
<body>
<a href="http://www.softwhy.com">螞蟻部落</a>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/21/004154r440hw41aau1mkbh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

左右內邊距的表現非常正常，看看頂部是不是非常奇怪。

所以對於內聯元素你可以設定它的左右內外邊距，但是要設定上下內外邊距，需要將其轉換為塊級元素或者塊級內聯元素。下面再來羅列一下內聯元素的一些特點：

（1）.無法設定尺寸。

（2）.可以使用text-align設定內聯元素的對齊方式。

（3）.內聯元素可以同時在一行排列。

（4）.內聯元素不能設定上下內外邊距，可能會出現意想不到的情況。

關於內聯元素的更多內容可以參閱如下兩篇文章：

（1）.CSS塊級/內聯元素一章節。

（2）.塊級元素和行內元素分別有哪些一章節。

相關文章