Css li高度不适合外部div

Question

我正在尝试创建一个菜单面板。here是我的菜单。你可以看到li的高度不适合menu div的高度。我已设置两者的高度相同，但它看起来与底部有一些余量。我希望li填充菜单高度。

感谢您的帮助

像这样：

这里是我的代码

css：

.menu{
height:30px;
width:780px;
background-color:#09F;
}
.menu ul{
float:left;
list-style:none;
margin-top:0px;
height:30px;
}
.menu ul li{
margin-left:15px;height:30px;background-color: #ccc;display:inline;
}
.menu ul li a{
text-decoration:none;
}

html：

<div class="menu">
<ul >
<li><a href="#">Create Account</a></li>
<li><a href="#">Change Account</a></li>
</ul>
</div>

Answer 1

您只需稍微更改CSS

即可

.menu ul li {
    margin-left:15px;
    height:30px;
    background-color: #ccc;
    display:inline-block; 
    float:left;
}

将display:inline更改为display:inline-block