html - Div 的高度太多了，不会降低？

Question

我正在尝试创建一个带有几个链接的菜单栏。这是我的相关代码:

CSS:

#menuBar {
    overflow: auto;
    padding: 0px 0px;
    margin: 15px 0px;
}
div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
}
div#menuItem ul a {
    font-size:14px;
}

HTML

<div id="menuBar">
<div id="menuItem"> 
<ul>
<li> <a href="index.php"> HOME</a> </li>
<li> <a href="index.php"> ABOUT</a> </li>
</ul>
</div> <!-- Menuitem closes -->
</div>

所以，这里的问题是 menuBar 的最小高度保持不变。我想让它显得小一点。我尝试设置 #menuBar {padding -5px 0px } 的填充。但是，没有任何反应。

我该怎么做。如果我完全删除填充代码。 div 的高度变得很小，刚好可以容纳文本。

Answer 1

通过使用 line-height 或 height 属性为 div 设置高度。