css - 如何使我的 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

就像其他人已经说过的那样。

应用float:left一个li

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