關於a標籤點擊Focus狀態下背景顏色區域不夠的問題

想要點擊a標籤之後改變背景顏色的參數，但是發現背景顏色只改變了很小的一部分：

原代碼如下：

header ul{
	display: inline-block;
}
header li{
	float: left;
	padding: 0 8px;
	line-height: 36px;
}
header a:focus{
	background-color: #5090f5;
	color: white;
	font-weight: bold;
}

 

導致這種情況分爲兩個方向：即橫向和縱向。

橫向是因爲padding給的值撐開的是li標籤而不是a標籤，但是focus是a標籤的狀態，解決方案是把padding參數給到a標籤裏，代碼如下：

header ul{
	display: inline-block;
}
header li{
	float: left;
	line-height: 36px;
}
header a{
	padding: 0 8px;
}
header a:focus{
	background-color: #5090f5;
	color: white;
	font-weight: bold;
}

可以得到以下效果：

縱向的原因是a標籤是內聯標籤，所以標籤的高度由內容撐開，想要獲得完整高度則將它轉換爲行內塊標籤並且給上相應的高度，代碼如下：

header ul{
	display: inline-block;
}
header li{
	float: left;
	line-height: 36px;
}
header a{
	padding: 0 8px;
	display: inline-block;
	height: 36px;
}
header a:focus{
	background-color: #5090f5;
	color: white;
	font-weight: bold;
}

可以得到如下效果：