如何设置 a:link 高度/宽度与 css？答案

【问题标题】：How to set a:link height/width with css?如何设置 a:link 高度/宽度与 css？
【发布时间】：2011-08-24 19:35:45
【问题描述】：

我无法设置导航的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;
}

任何想法我做错了什么？

【问题讨论】：

标签： html css

【解决方案1】：

感谢 RandomUs 1r 的观察：

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

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

首先将“li”元素设置为如下样式：

显示：内联块；
宽度：7em;
文本对齐：居中；

然后为“a”元素设置如下样式：

宽度：100%；

现在导航链接都等宽，每个链接的文本居中。

【讨论】：

【解决方案2】：

锚点需要与默认显示类型不同才能获取高度。 display:inline-block; 或 display:block;。

还可以查看line-height，这可能会很有趣。

【讨论】：

line-height 也是一个很好的解决方案。但是当链接中的文本超过 2 行时，这两行之间的空格会很大。

【解决方案3】：

来自definition of height：

适用于：所有元素，但不可替换的内联元素、表格列和列组

a 元素默认为内联元素（并且不可替换）。

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

【讨论】：

【解决方案4】：

您的问题可能是a 元素本质上是display: inline。不能设置内联元素的宽高。

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

【讨论】：

浮动它们可能会阻止它们的父元素在它们周围扩展。
@Cobra 是的，但这很容易解决。 In 2011, is there any need for clearfix?
所以我们需要在这里修复修复？听起来不太好。

【解决方案5】：

添加显示：块；

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

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

【讨论】：

块的副作用是它会在元素之后创建一个新行。