Html 给李上课

我想在我的网站上有两个列表。一个水平对齐的主导航和一个垂直对齐的子导航。为此，我应该在CSS中有两个不同的li类

我试着给li上导航课，但没用。HTML与CSS不对应，列表也没有水平对齐

这是HTML：

    <ul>
        <li class="navli"><a href="./index.html">Home</a></li>
        <li class="navli"><a href="./books.html">Books</a></li>
        <li class="navli"><a href="./benefits.html">Benefits</a></li>
        <li class="navli"><a href="./about.html">About</a></li>
        <li class="navli"><a href="./contact.html">Contact</a></li>
        <li class="navli"><a href="./resources.html">Other Resources</a></li>
    </ul>

如果没有HTML中的“li class..”和CSS中的“li.class”，它可以正常工作，但是当我尝试分配一个类时，它就坏了

---

可能是一个非常明显的解决方案，但我就是看不到。

如果您试图分别针对每个列表，那么从父级ul针对它们比在每个单独的li上设置一个类更有效

例如：

.topul li {
  display: inline;
  padding: 1em;
  text-align: center;
  font-size: 17pt;
  font-family: 'Dosis', Arial, sans-serif;
}

.bottomul li {
  /* Other Styles Here */
}

---

因此，只需在父UL上放置一个类（或ID），然后以这种方式将它们作为目标。它效率更高，可以清理东西，并有可能解决您的问题。

每节课选两个

类
&为每个类定义
li
。
那么问题是什么？它不是垂直的？你还没有告诉它，这样做不容易吗？
和css
.navli{}
？让我重新表述一下原来的帖子。很抱歉，您的代码确实生成了一个水平列表。我刚刚把你的代码复制到了，它是水平的。没问题！如果我的答案有帮助，不要忘记选择正确的答案和/或投票！希望我能帮忙！
.topul li {
  display: inline;
  padding: 1em;
  text-align: center;
  font-size: 17pt;
  font-family: 'Dosis', Arial, sans-serif;
}

.bottomul li {
  /* Other Styles Here */
}