奇怪的单元格大小在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导航栏中移动

回答

相关问题