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 a
elements 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-height
which might be interesting with this.
还要检查line-height
哪个可能有趣。
回答by Pekka
Your problem is probably that a
elements are display: inline
by nature. You can't set the width and height of inline elements.
您的问题可能是 a
元素display: inline
的本质。您无法设置内联元素的宽度和高度。
You would have to set display: block
on 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: left
so 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 a
element 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.
现在导航链接的宽度都相等,每个链接中的文本居中。