1

我正在尝试创建一个包含一些链接的菜单栏。这是我的相关代码：

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 的高度变得非常小，仅足以容纳文本。

4

2 回答 2

1

通过使用line-heightorheight属性为 div 设置一个高度。

于 2012-10-05T19:38:06.237 回答
0

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;
 }​
于 2012-10-05T19:39:25.243 回答