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添加高度。

Answer 2

尝试向左移动div#menuItem ul li，然后将display:block添加到您的a元素和明确的line-height值。

div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
    float:left;
}

div#menuItem ul a {
    display: block;
    font-size:14px;
    line-height: 1;
    text-decoration: none;
 }

Div的高度太大，没有减少？

2 个答案: