如何使用CSS设置a：link高度/宽度？

我只是无法设置a导航元素的高度和宽度。

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

有什么想法我做错了吗？

添加显示：块；

a-tag是一个内联元素，因此您的高度和宽度将被忽略。

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

锚点将需要使用不同于其默认值的显示类型来取得高度。 display:inline-block;或display:block;。

还要检查line-height哪些可能与此有关。

您的问题可能是 a元素是display: inline天生的。您不能设置内联元素的宽度和高度。

您必须在display: block上进行设置a，但这会带来其他问题，因为链接开始表现得像块元素一样。最常见的解决方法是给予它们，float: left以便它们始终并排排列。

从高度的定义：

适用于：除不可替换的嵌入式元素，表列和列组以外的所有元素

一个a元件是，在默认情况下的内联元件（和它是非取代）。

您需要更改显示（直接使用display属性或间接更改，例如使用float）。

感谢RandomUs 1r的观察：

更改为display：inline-block; 解决了这个问题。– RandomUs1r 13年5月14日在21:59

我自己尝试了一个顶部导航菜单栏，如下所示：

首先设置“ li”元素的样式，如下所示：

显示：inline-block;
宽度：7em;
文本对齐：居中；

然后，按如下方式设置“ a“>元素的样式：

宽度：100％;

现在，导航链接的宽度均相等，文本以每个链接为中心。