CODEWITHSUNDEEP
htmlcss
DustySandwich
DustySandwich

Reputation: 21

horizontal nav bar / unordered list

I'm creating a simple nav bar with a <ul> and am trying to make the <li> items stack horizontal instead of vertical. I placed the display:inline code in my css, but the list items still remain vertical. Any help would be appreciated!

<div id="nav">
    <ul>
        <li> Home </li>
        <li> Farm Park </li>
        <li> Cafe </li>
        <li> Goods </li>
        <li> Gallery </li>
        <li> Contact </li>
    </ul>
</div>

and my CSS is just 

#li {
    display: inline;
 }

Upvotes: 2

Views: 997

Answers (2)

NachoDawg
NachoDawg

Reputation: 1544

change 

#li {
     display: inline;
 }

to

#nav li {
     display: inline;
 }

or

li {
     display: inline;
 }

Upvotes: 0

indubitablee
indubitablee

Reputation: 8216

the selector is li, not #li. the #li selector applies for the element with id ="li". the li selector applies to the <li> elements

li {
  display: inline-block;
}
<div id="nav">
  <ul>
    <li> Home </li>
    <li> Farm Park </li>
    <li> Cafe </li>
    <li> Goods </li>
    <li> Gallery </li>
    <li> Contact </li>
  </ul>
</div>

Upvotes: 6

Related Questions