html - Css li 高度不适合外部 div

Question

我正在尝试创建一个菜单面板。 here是我的菜单。如您所见，li 的高度不适合 menu div 的高度。我为两者设置了相同的高度，但它看起来有一些余量底部。我想要那个 li 来填充菜单高度。

谢谢你的帮助

像这样:

这里是我的代码

.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;
}

<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