我正在制作导航栏,我希望其中的所有链接都是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/
答案 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%控制你的元素位置,大小等。
答案 5 :(得分:0)
使用display: inline-block;
#header a {
height:30px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
display: inline-block;
}
答案 6 :(得分:0)
A是内联元素,您不能使用高度。如果要这样做,必须先将其更改为块元素。您可以使用display: block;
执行此操作但是这会将您的元素放在屏幕上的新“线”上,如果您希望它保持为内联元素,则应使用display:inline-block;
或者您可以使用line-height。