横向导航栏

横向导航栏可以使用以下 HTML 和 CSS 代码来创建：

HTML代码：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS代码：

nav {
  background-color: #333;
  height: 50px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

在这个示例中，我们使用了 `float` 属性使每个导航项都水平排列，使用 `background-color` 属性设置导航栏的背景颜色，使用 `color` 属性设置文字颜色，使用 `padding` 属性设置每个导航项的内边距，使其看起来更美观。当鼠标悬停在导航项上时，使用 `:hover` 伪类来设置背景颜色。

你可以根据需要修改这些样式，以便符合你的设计需求。