我无法将导航栏文本链接设置为水平吗？

Question

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.

Answer 1

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