高度不适用于'A'标签

时间:2014-03-05 09:56:20

标签: html css

我正在制作导航栏,我希望其中的所有链接都是30px高。当我设置它 - height:20px;(20像素,因为周围有5px填充) - 高度保持正常。我的完整代码是:

#header a {
    height:20px;
    background-color:#666666;
    color:white;
    text-decoration:none;
    border:none;
    padding:5px;
}

#header a:hover {
    background-color:#CCCCCC;
    color:black;
}

JSFiddle:http://jsfiddle.net/Lcupj/

7 个答案:

答案 0 :(得分:5)

默认情况下,height属性不适用于display: inline<a>元素为display: inline的元素。

display属性设置不同的值(例如inline-block)或改为使用line-height

答案 1 :(得分:1)

您也可以在A标签上使用填充,并使用行高。 例如:

a {
    padding : 9px;
    line-height : 20px;
}

再见。

答案 2 :(得分:0)

height不适用于内联块。

在CSS中使用display: inline-block使元素的行为类似于内联元素,但具有一些块元素属性。

答案 3 :(得分:0)

添加到CSS

中的规则display:inline-block

答案 4 :(得分:0)

您也可以尝试以下

#header a {
    position:absolute;
    margin:0;
    padding:0;
    height:20px;
    background-color:#666666;
    color:white;
    text-decoration:none;
    border:none;
    padding:5px;
}

有时您必须手动设置给定元素的高度或填充,否则元素将被压扁以适合其他元素。我也使用position:absolute这样可以100%控制你的元素位置,大小等。

http://jsfiddle.net/Lcupj/

答案 5 :(得分:0)

使用display: inline-block;

#header a {
    height:30px;
    background-color:#666666;
    color:white;
    text-decoration:none;
    border:none;
    padding:5px;

    display: inline-block;
}

DEMO

答案 6 :(得分:0)

A是内联元素,您不能使用高度。如果要这样做,必须先将其更改为块元素。您可以使用display: block;执行此操作但是这会将您的元素放在屏幕上的新“线”上,如果您希望它保持为内联元素,则应使用display:inline-block;或者您可以使用line-height。