给李上课

Question

我想在我的网站上有两个列表。一个水平对齐的主导航，一个垂直对齐的子导航。为此，我的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>

我也试过＆lt; li id =“navli”＆gt;但这没用。

这是CSS：

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

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

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

Answer 1

如果你试图单独定位每个列表，那么从父级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 */
}

所以只需将一个类（或ID）放在父UL上，然后以这种方式定位它们。它效率更高，可以清理，并可能解决您的问题。

Answer 2

取两个class＆amp;为每个班级定义li。