html - 给李老师上课

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>

我也试过 <li id="navli" > 但这没有用。

这是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 */
}

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

Answer 2

为每个班级取两个class并定义li。