Question

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

如何让.active的背景占据li的整个高度并将图标居中？如果您查看演示，则它不会尊重li的行高。

演示： ~~http://codepen.io/anon/pen/ulEGw~~

Answer 1

您可以将.icon-home设置为display: inline-block;，这会将其与文本的其余部分垂直居中。

您也可以通过这种方式保持line-height。

Answer 2

假设您希望将line-height: 70px保持在.nav，请将height: 70px;放在.icon-home上。

水平列表不占据整个高度

2 个答案: