美观的html横向导航条代码

以下是一个基本的横向导航条的 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: none; /* 去掉列表标记 */
  margin: 0;
  padding: 0;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 在导航条中均匀分布每个链接 */
  height: 100%; /* 使链接的高度与导航条高度相同 */
}

li {
  margin: 0 10px; /* 每个链接之间的间距 */
}

a {
  color: white; /* 链接文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  line-height: 50px; /* 使链接的高度与导航条高度相同 */
}

你可以根据需要修改颜色、高度等属性来自定义横向导航条。