我如何才能使我的ul列表在nav元素的一行中

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 上应用float:left

nav ul li{ float:left; }​

或display: inline;

nav ul li{ display: inline; }​

Answer 2

这里有一个演示：

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;
}