css - 如何以水平方式保持菜单链接

Question

我厌倦了试图以水平方式保持菜单（家庭、照片、绘画）。这些链接以垂直方式出现，例如第一个家，然后是照片，然后是绘画。我不希望这些以垂直方式。我想保持水平。请帮助我

<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

使用floatcss 属性

li{
 float:left;
}

jsFiddle 演示

Answer 2

你也可以使用

li{
    display:inline-block;
}