css - 使用 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：

这是检查员告诉我的：

我尝试过 using inline-block，尝试过制作<a> display: block， usingclearfix和其他一些东西，但似乎无法弄清楚。

有什么建议么？

Answer 1

您还应该尝试向 li 元素 (.nav-global li) 添加填充，并将其显示为 inline-block

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