How do I make these links go horizontally and not vertically?

this is what the links look like: http://www.screencast.com/users/rockstarvisible/folders/Jing/media/6d18eddb-4785-459e-88a5-b6448a5771ef

the css file can be found on rankingclimber.com/css/style.css

this is the code in the footer.php file:

`

    <h3>Website Links</h3>

    <ul>
        <li><a href="what-is-ranking-climber.php">What is Ranki开发者_高级运维ng Climber?</a>&nbsp; &nbsp; 
        <li><a href="about-us.php">About Us</a></li>
        <li><a href="contact-us.php">Contact Us</a></li>
        <li><a href="press.php">Press</a></li>
        <li><a href="terms.php">Terms &amp; Conditions</a></li>
        <li><a href="privacy.php">Privacy Policy</a></li>
    </ul>

`

People are all over the place with their answers..

The <ul> and <li> elements are naturally block level elements... meaning unless a proper width is set, they will take up the entire width of the 'line' they exist on...

Your <ul> could remain block level if you want (usually very helpful) so you do not want to apply display : inline to your <ul> ...

...

You could use:

li {
    display : inline;
}

which will turn your <li> into 'inline' elements--but you lose the versatility of block level elements (custom width/height, floats, etc) thus the more common alternative is to use:

li {
   float : left;
}

And you'll probably want to make sure the padding/margins are set to your aesthetic needs, for example:

li {
   float : left;
   padding : 0;
   margin : 0 0 0 12px; // 12px left margin, for some breathing room
}

If you don't specify a width, a floated block will shrink to the width (give or take a few pixels) of its content... which is handy knowledge for creating 'tabs.'

Hopefully this clears up any confusion within this question. See the example here: http://jsfiddle.net/X3hAZ/ (I added a black border so you can see the dimensions of each block.)

In the css give

display: inline; float:left

I hope that will help you.

ul{
    display:inline;
}

in your css file.

add the property

li { float: left; }

to your css

Put ul{margin:0; padding:0} for the ul. Then put {display:inline; padding:0; margin:0} for li... So complete code is ul{margin:0;padding:0;} li{display:inline; padding:0; margin:0; I think this should do the trick. Here is a good example of this, complete with a css hover effect

@Pawan :- If you are using css then u can write the code given below:

ul li {
    float:left;
}

Hope it works............

ul{
   margin:0;
   padding:0;
}
li{
   margin: 0;
   padding: 0;
   display: inline;
}

hope this will work.