如何设置一个: 链接高度/宽度与 css？

我只是不能设置导航中 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;
}

知道我哪里做错了吗？

html
css

169883 次浏览

小开

最佳答案

add display: block;

a-tag is an inline element so your height and width are ignored.

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

小开

Your problem is probably that a elements are display: inline by nature. You can't set the width and height of inline elements.

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.

小开

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).

You need to change the display (directly with the display property or indirectly, e.g. with float).

小开

Anchors will need to be a different display type than their default to take a height. display:inline-block; or display:block;.

Also check on line-height which might be interesting with this.

小开

Thanks to RandomUs 1r for this observation:

changing it to display:inline-block; solves that issue. – RandomUs1r May 14 '13 at 21:59

I tried it myself for a top navigation menu bar, as follows:

First style the "li" element as follows:

display: inline-block;
width: 7em;
text-align: center;

Then style the "a"> element as follows:

width: 100%;

Now the navigation links are all equal width with text centered in each link.