サイトに 2 つのリストを作成したいと考えています。水平に配置された 1 つのメイン ナビゲーションと、垂直に配置された 1 つのサブ ナビゲーション。このためには、CSS に 2 つの異なる 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" がなくても問題なく動作しますが、クラスを割り当てようとすると壊れます。
おそらく非常に明白な解決策ですが、私にはそれがわかりません。