html导航栏横向排列

在 HTML 中，导航栏可以使用无序列表（`<ul>`）和列表项（`<li>`）来创建，然后使用 CSS 设置样式来实现横向排列。

以下是一个简单的 HTML 和 CSS 示例：

HTML 代码：

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

CSS 代码：

.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

.navbar li {
  float: left;
}

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

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

解释：

- `list-style: none;`用于去除列表项的默认样式；
- `margin: 0; padding: 0;`用于去除列表的默认外边距和内边距；
- `overflow: hidden;`用于清除浮动元素的影响；
- `float: left;`用于让列表项横向排列；
- `display: block;`用于让链接元素变成块级元素，以便设置宽度和高度；
- `padding: 14px 16px;`用于设置链接的内边距；
- `text-decoration: none;`用于去除链接的下划线。

以上样式仅供参考，您可以根据自己的需求进行修改。