how to keep the menu links in horizontal manner

Question

I am fed up trying to keep the menus (home, photos, paintings) in a horizontal fashion. These links come in vertical manner like first home, then photos then paintings. I don't want these in vertical manner. I want to keep it in horizontal.Please help me

<style>
body{background:black}
li a{
    white-space: nowrap;
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 0px 0px #fff;
    letter-spacing: 1px;
    -moz-transform: scale(0.5); 
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5); 
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    transition: all 0.6s linear;  text-decoration:none
}
li a:hover{
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    text-decoration:none
}
li a:hover:before{content:"<"}
li a:hover:after{content:">"}

</style>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

Answer 1

You can also use

li{
    display:inline-block;
}

Answer 2

Use float css property

li{
 float:left;
}

jsFiddle Demo