我怎样才能让我的ul列表在导航元素中的一行？

Question

我有以下代码：

<nav> 

     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Contact</a></li> 

     </ul> 
     <nav> 

我需要进行横向显示的每一个环节，而不是垂直，这CSS属性允许我这样做吗？

感谢

Answer 1

像其他人已经提到。

应用在li

nav ul li{ float:left; }​ 

或display: inline;

nav ul li{ display: inline; }​ 

Answer 2

这里演示一个float:left你：

http://jsfiddle.net/4C8NP/

<nav> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 
</nav> 

body { 
padding:30px; 
} 

nav { 
overflow:auto; 
} 

nav ul > li { 
display:inline; 
margin-right:2px; 
} 

nav ul > li > a { 
display:inline-block; 
padding:10px 20px; 
background:#ccc; 
border:1px solid #666; 
}