Html 水平列表未占据整个高度 .导航{ 线高：70px； 保证金：0； 填充：0； 边界：0； } 李国荣先生{ 列表样式图像：无； 列表样式类型：无； 左边距：0； 空白：nowrap； 显示：内联； 浮动：左； 左侧填充：4px； 右侧填充：4px； } .主动{ 背景：粉红色； } .图标主页{ 背景：url(http://i.stack.imgur.com/MNme0.png)不重复； 宽度：16px； 高度：14px； 显示：块； } 身体{ 背景：灰色； }

如何使

.active

的背景占据

li

的整个高度并将图标居中？如果您查看演示，它不考虑

li

的行高

---

演示：

您可以将

.icon home

设置为

显示：内联块，它将与文本的其余部分垂直居中

您也可以通过这种方式保持
行高。
假设您想保持
行高：70px
在
上。导航
，放置
高度：70px
在
.icon home
@Hermione那里有一个额外的样式规则，.nav a{display:block；}，这使它看起来不同。
<ul class="nav">
    <li><a href="#"><i class="icon-home"></i></a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Elements</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

.nav {
  line-height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
}
.nav li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
  padding-left: 4px;
  padding-right: 4px;
}
.active {
  background: pink;
}
.icon-home {
  background: url(http://i.stack.imgur.com/MNme0.png) no-repeat;
  width: 16px;
  height: 14px;
  display:block;
}
body {
  background: gray;
}