如何设置：链接高度/宽度与CSS？

这听起来有点疯狂，但我不能设置我的导航元素的高度和宽度。如何设置：链接高度/宽度与CSS？

#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; 
}

任何想法我做错了什么？

来源

2011-05-13 Lost in OWL

[在A标签上设置宽度和高度]的可能重复（http://stackoverflow.com/questions/4743254/setting-a-width-and-height-on-an-a-tag） – 2013-12-26 16:40:50

165

add display：block;

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

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

来源

2011-05-13 09:59:44

+22

块有副作用，它会在元素后创建一个新行。 – 2011-05-13 10:01:06

+30

将其更改为显示：inline-block;解决了这个问题。 – RandomUs1r 2013-05-14 21:59:41

声望++简明扼要回答 – cwiggo 2013-10-10 22:51:03

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

您将不得不在a上设置display: block，但这会带来其他问题，因为链接的行为与块元素相似。最常见的治疗方法是给他们float: left，所以他们无论如何排队。

来源

2011-05-13 09:59:52

浮动它们可能会阻止它们的父元素扩展它们。 – 2011-05-13 10:03:57

@Cobra是的，但这很容易修复。 [在2011年，是否有任何需要clearfix？]（http://stackoverflow.com/q/5565668） – 2011-05-13 10:24:49

因此，我们需要修复这里的修复？这听起来不错。 – 2011-05-13 10:28:03

从definition of height：

适用于：所有元素，但非替换内嵌元素，表中的列，以及列组

一种a元件是，在默认情况下一个内联元素（和它不被替换）。

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

来源

2011-05-13 10:00:02 Quentin

锚需要是一个不同的显示类型比他们的默认高度。 display:inline-block;或display:block;。

此外，请检查line-height这可能是有趣的。

来源

2011-05-13 10:00:23

行高也是一个很好的解决方案。但是，当链接中的文本超过两行时，这两行之间的空白是巨大的。 – 2011-05-13 10:04:15

由于RandomUs 1R对这个观察结果：

其更改为显示：内联块;解决了这个问题。 - RandomUs1r 5月14日在'13 21:59

我没有尝试过自己了顶部导航菜单栏，如下所示：

首先风格的 “礼” 元素如下：

display：inline-block;
宽度：7em;
text-align：center;

然后样式 “一”>元素如下：

宽度：100％;

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

来源

2014-04-05 04:24:23 user123318

如何设置：链接高度/宽度与CSS？

回答

相关问题