CODEWITHSUNDEEP
htmlcsshtml-lists
user1736049
user1736049

Reputation: 366

Giving class to li

I want to have two lists on my site. One main navigation that is horizontally aligned, and one sub navigation that is vertically aligned. For this I should have two different li classes in my CSS.

I tried to give the navigation li a class but it's not working. The HTML doesn't correspond to the CSS and the list isn't horizontally aligned.

This is the 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>

I also tried < li id="navli" > but this didn't work.

This is the CSS:

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

without the "li class.." in HTML and "li.class" in CSS it works fine, but when I try to assign a class it's broken.

Probably a very obvious solution, but I just can't see it.

Upvotes: 1

Views: 9575

Answers (2)

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Take two class & define li for each class.

Upvotes: 0

streetlight
streetlight

Reputation: 5968

If you're trying to target each list separately, it's more efficient to target them from the parent ul rather than putting a class on each individual li.

For example:

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

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

So just put a class (or ID) on the parent UL, then target them that way. It's more efficient and could clean things up, and potentially solve your problem.

Upvotes: 3

Related Questions