1

サイトに 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" がなくても問題なく動作しますが、クラスを割り当てようとすると壊れます。

おそらく非常に明白な解決策ですが、私にはそれがわかりません。

4

2 に答える 2

3

各リストを個別にターゲットにしようとしている場合は、個々の li にクラスを配置するよりも、親 ul からそれらをターゲットにする方が効率的です。

例えば：

.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) を配置し、そのようにターゲットにします。それはより効率的であり、物事をクリーンアップし、問題を解決する可能性があります.

于 2012-10-31T15:04:16.077 に答える
0

クラスごとに2つ取ってclass定義します。li

于 2012-11-01T14:37:42.307 に答える