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

如何让我的ul列表在nav元素中的一行？

2 个答案: