如何以水平方式保持菜單鏈接

Question

我厭倦了試圖以水平方式保持菜單（家庭，照片，繪畫）。這些鏈接像第一個家庭一樣以垂直方式出現，然後是照片和繪畫。我不想要這些垂直方式。我想保持它在horizo​​ntal.Please幫我

<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

使用float CSS屬性

li{ 
float:left; 
} 

jsFiddle Demo

Answer 2

您還可以使用

li{ 
    display:inline-block; 
}