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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:35:32  来源:igfitidea点击:

How to set a:link height/width with css?

htmlcss

提问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: blocka,但会带来其他问题,因为链接开始表现得像块元素。最常见的治疗方法是让它们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.

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