CSS 水平 UL

在网站开发中，水平排列的导航菜单是必不可少的元素之一。我们可以使用 CSS 来实现这个效果。

HTML 结构

首先，我们需要编写一个基本的 HTML 结构，用于创建导航菜单。我们可以使用 <ul> 标签来创建列表，使用 <li> 标签来创建每一个选项。如下所示：

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

这里我们创建了一个名为 nav 的类，用于将样式应用到导航菜单上。

CSS 样式

现在，我们需要为我们的导航菜单添加一些 CSS 样式，使其水平排列。我们可以使用 display: inline-block 属性来实现这个效果。如下所示：

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

.nav li {
  display: inline-block;
  margin-right: 20px;
}

.nav li:last-child {
  margin-right: 0;
}

.nav li a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

这里我们给每个导航选项添加了 display: inline-block 样式，并使用 margin-right 属性来为每个选项之间添加间距。同时，我们还为最后一个选项使用 :last-child 选择器，去掉其右侧的间距。

完整代码

完整的 HTML 和 CSS 代码如下所示：

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

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

.nav li {
  display: inline-block;
  margin-right: 20px;
}

.nav li:last-child {
  margin-right: 0;
}

.nav li a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

总结

现在，我们已经成功地创建了一个水平排列的导航菜单。我们可以根据需要修改样式，并使用此方法创建更复杂的导航菜单。