Question

这是情况。我写了一个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/>

Answer 1

简答：: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>

Answer 2

您可以为此发布HTML或链接此页面吗？可能不相关，但似乎你没有在所有.vertical链接中使用重新声明字体大小，填充，文本修饰，字体粗细和宽度的级联。

Answer 3

我将您的代码粘贴到测试页面中，但我看不到您描述的效果。可能有其他风格影响您的链接？使用Firebug或IE开发工具检查链接以查看正在应用的样式。

css导航栏中奇怪的单元大小移位

3 个答案: