css导航条横着排

在网页布局中，导航条是一个必不可少的部分，它可以让用户方便地找到所需的信息或页面。而在导航条的布局中，横向导航条是其中一种常见的形式，下面就来介绍如何用CSS实现横向导航条。

/* 导航条样式 */
.navigation {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 居中对齐 */
  list-style: none; /* 去掉列表标记 */
  margin: 0;
  padding: 0;
}

/* 导航栏选项样式 */
.navigation li {
  margin: 0 20px; /* 设置选项之间的间隔 */
}

/* 导航栏链接样式 */
.navigation a {
  color: #333; /* 文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
}

以上CSS代码实现了一个基本的横向导航条。首先使用了flex布局，使得导航栏中的选项可以横向排列；使用justify-content: center可以使得选项居中对齐。由于使用了ul和li，需要去掉其默认的样式，故设置list-style: none、margin和padding为0。下面针对导航栏中的选项和链接进行样式设置，使其更具可读性。

当然，这只是一个基本的模板，可以根据具体需求进行修改和优化，例如可以添加hover时的样式变化、选中状态的样式等。