在同一行的导航栏中显示 li

在网页设计中，常常需要在导航栏中显示一组列表项（li），要求它们都在同一行中。这种需求可以通过CSS来实现。下面是一个简单的实例。

HTML代码

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

这是一个基本的导航栏，其中包含4个列表项（li）。我们要求它们都在同一行中显示。

CSS样式

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
}

.nav li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
}

我们通过将列表项（li）的display属性设置为inline-block来让它们在同一行中显示。同时，我们调整了链接（a）的padding和text-align属性，以使它们更好看。

示例效果

这是一个基本的实现效果：

• Home
• About Us
• Products
• Contact

总结

通过以上方式，我们可以轻松地实现在同一行的导航栏中显示多个列表项（li）。当然，具体的样式可以根据实际需求进行调整，以达到最佳的视觉效果。