如何用css设置:链接高度/宽度？

Question

我只是无法设置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;
}

我有什么想法我做错了吗？

Answer 1

添加显示:块;

a-tag是内联元素,因此忽略高度和宽度.

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

Answer 2

锚点需要与默认值不同的显示类型才能占用高度. display:inline-block;或display:block;.

还要检查line-height哪个可能有趣.

Answer 3

你的问题可能就是 a元素display: inline本质上.您无法设置内联元素的宽度和高度.

你将不得不设置display: block的a,但会带来其他问题,因为链接开始表现得像块元素.最常见的治疗方法是让他们float: left无论如何并排排队.

Answer 4

从高度的定义:

适用于:所有元素,但未替换的内联元素,表列和列组

一个a元件是,在默认情况下的内联元件(和它是非取代).

您需要更改显示(直接使用display属性或间接更改,例如使用float).

Answer 5

感谢 RandomUs 1r 的观察：

\n\n

\n

将其更改为显示：inline-block；解决了这个问题。\xe2\x80\x93 RandomUs1r 2013 年 5 月 14 日 21:59

\n

\n\n

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

\n\n

首先对“li”元素进行样式设置，如下所示：

\n\n

\n

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

\n

\n\n

然后按如下方式设置“a”>元素的样式：

\n\n

\n

宽度：100%；

\n

\n\n

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

\n