Html 如何使用 css 设置链接高度/宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5990223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a:link height/width with css?
提问by Upvote
I just can't set the height and width of aelements of my navigation.
我只是无法设置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;
}
Any ideas what I am doing wrong?
任何想法我做错了什么？
回答by Stijn Janssen
add display: block;
添加显示：块；
a-tag is an inline element so your height and width are ignored.
a-tag 是一个内联元素，因此您的高度和宽度将被忽略。
#header div#snav div a{
display:block;
width:150px;
height:77px;
}
回答by Cobra_Fast
Anchors will need to be a different display type than their default to take a height.
display:inline-block;or display:block;.
锚点需要与默认显示类型不同才能获得高度。
display:inline-block;或display:block;。
Also check on line-heightwhich might be interesting with this.
还要检查line-height哪个可能有趣。
回答by Pekka
Your problem is probably that aelements are display: inlineby nature. You can't set the width and height of inline elements.
您的问题可能是 a元素display: inline的本质。您无法设置内联元素的宽度和高度。
You would have to set display: blockon the a, but that will bring other problems because the links start behaving like block elements. The most common cure to that is giving them float: leftso they line up side by side anyway.
你将不得不设置display: block的a，但会带来其他问题，因为链接开始表现得像块元素。最常见的治疗方法是让它们float: left并排排列。
回答by Quentin
From the definition of height:
Applies to: all elements but non-replaced inline elements, table columns, and column groups
适用于：除不可替换的内联元素、表格列和列组之外的所有元素
An aelement is, by default an inline element (and it is non-replaced).
一个a元件是，在默认情况下的内联元件（和它是非取代）。
You need to change the display (directly with the display property or indirectly, e.g. with float).
您需要更改显示（直接使用 display 属性或间接，例如使用浮动）。
回答by user123318
Thanks to RandomUs 1r for this observation:
感谢 RandomUs 1r 的观察：
changing it to display:inline-block; solves that issue. – RandomUs1r May 14 '13 at 21:59
将其更改为 display:inline-block; 解决了这个问题。– RandomUs1r 2013 年 5 月 14 日 21:59
I tried it myself for a top navigation menu bar, as follows:
我自己试了一个顶部导航菜单栏，如下：
First style the "li" element as follows:
首先设置“li”元素的样式如下：
display: inline-block;
width: 7em;
text-align: center;
显示：内联块；
宽度：7em；
文本对齐：居中；
Then style the "a"> element as follows:
然后将 "a"> 元素设置为如下样式：
width: 100%;
宽度：100%；
Now the navigation links are all equal width with text centered in each link.
现在导航链接的宽度都相等，每个链接中的文本居中。
