CODEWITHSUNDEEP
htmlcss
user2757607
user2757607

Reputation: 11

I can't make my navigation bar text links horizontal?

I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:

#nav li a {
    color: black;
    display: inline;
    list-style-type: none;
}

#nav li a {
    color: black;
    position: relative; 
}

i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.

Upvotes: 1

Views: 215

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

You are targeting the wrong element, it should be

#nav li {
   display: inline;
}

You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li

I would suggest you to use 

#nav li {
   display: inline-block;
   margin-left: -4px; /* If that white space matters to you */
}

As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block

Upvotes: 3

Related Questions