使用display：inline添加反映在父级高度中的填充

Question

我确定之前有人遇到过这个问题，但我似乎无法找到正确的方法来描述它。

我有一排像这样的图标：

这是如此生产......

HTML：

<nav class="nav-global">
    <ul>
        <li>
            <a href="/home">Home</a>
        </li>
        <li>
            <a href="/our-story">Our Story</a>
        </li>
        ...
        <li>
            <a href="/login">Login</a>
        </li>
    </ul>
</nav>

CSS：

.nav-global ul {
  padding: 0;
  text-align: center;
}
.nav-global li {
  display: inline;
}
  .nav-global li a {
    background-image: url(/try/img/nav-global-icon.png);
    background-repeat: no-repeat;
    background-position: center 0;
  }

当我想在<a>的顶部添加填充以使图标位于顶部时，我的问题就出现了。

将padding-top: 35px;添加到.nav-global li a：

以下是检查员告诉我的事情：

我已尝试使用inline-block，尝试使用<a> display: block，使用clearfix以及其他一些内容，但似乎无法弄明白。< / p>

有什么建议吗？

Answer 1

您还应该尝试将填充添加到li元素（.nav-global li），并将其显示为内联块

.nav-global li {
   display: inline-block;
   padding-top: 35px;
}