奇怪的單元格大小在CSS導航欄中移動

這是情況。我已經寫了一個css垂直導航欄，一旦封閉的鏈接被屏蔽，單元格的大小就會縮小！請幫忙！這裏是我的代碼：奇怪的單元格大小在CSS導航欄中移動

<style type="text/css"> 

a.vertical:link 
{ 
display:block; 
font-size:14px; 
padding: 1px 1px; 
text-decoration:none; 
color:#151B54; 
background:#FFFFFF; 
font-weight:bold; 
width:200px; 
} 

a.vertical:active 
{ 
font-size:14px; 
padding: 1px 1px; 
text-decoration:none; 
color:#151B54; 
background:#FFFFFF; 
font-weight:bold; 
width:200px; 
} 

a.vertical:visited 
{ 
font-size:14px; 
padding: 1px 1px; 
text-decoration:none; 
color:#F778A1; 
background:#FFFFFF; 
font-weight:bold; 
width:200px; 
} 

a.vertical:hover 
{ 
font-size:14px; 
padding: 1px 1px; 
text-decoration:none; 
color:#FFFFFF; 
background:#151B54; 
font-weight:bold; 
width:200px; 
} 

.verticalBorder 
{ 
background:#FFFFFF; 
padding: 1px 1px; 
border-style:solid; 
border-color:#FFFFFF; 
border-width:5px; 
width:200px; 
}  

</style> 

<div class="verticalBorder" align="left"> 
<a href="http://www.stpaulncanton.org/LatchKey/latchkeynew.html" 
class="vertical">After School Child Care</a><br/>

來源

2010-08-16 Daniel Mitchell

哦天啊。你在所有地方都有重複。 '顯示：塊;字體大小...寬度：200px'。所有共同的東西都應該放在a.vertical {}選擇器下面，而不是放在每一個選擇器中。 – 2010-08-16 19:39:28

你能爲此發佈HTML還是鏈接此頁？可能不相關，但它似乎並沒有像在所有.vertical鏈接中重新聲明font-size，padding，text-decoration，font-weight和width一樣使用級聯。

來源

2010-08-16 19:39:24 salmonete

我把你的代碼粘貼到一個測試頁面中，而我沒有看到你描述的效果。會不會有其他風格影響你的鏈接？使用Firebug或IE開發工具檢查鏈接以查看正在應用的樣式。

來源

2010-08-16 19:46:26 Ray

簡短回答：:link僞類風格未訪問鏈接，並且設置爲display:block。訪問鏈接時，:link不再適用，它們將恢復爲默認值display:inline，因此您將無法指定寬度。

除此之外，您應該閱讀cascade，以便您可以編寫更簡潔，可維護的CSS。例如，利用級聯，您的CSS可以結束爲：

<style type="text/css"> 

a.vertical 
{ 
display:block; 
font-size:14px; 
padding: 1px 1px; 
text-decoration:none; 
color:#151B54; 
background:#FFFFFF; 
font-weight:bold; 
width:200px; 
}  

a.vertical:visited 
{ 
color:#F778A1; 
} 

a.vertical:hover 
{ 
color:#FFFFFF; 
background:#151B54; 
} 

.verticalBorder 
{ 
background:#FFFFFF; 
padding: 1px 1px; 
border-style:solid; 
border-color:#FFFFFF; 
border-width:5px; 
width:200px; 
}  

</style>

來源

2010-08-16 19:47:20 ajm

奇怪的單元格大小在CSS導航欄中移動

回答

相關問題