Question

我正在制作导航栏，我希望其中的所有链接都是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/

Answer 1

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

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

Answer 2

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

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

再见。

Answer 3

height不适用于内联块。

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

Answer 4

添加到CSS

中的规则display:inline-block

Answer 5

您也可以尝试以下

#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/

Answer 6

使用display: inline-block;

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

    display: inline-block;
}

DEMO

Answer 7

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

高度不适用于'A'标签

7 个答案: