[分享]css做横向导航条

前端开发中，横向导航条是非常常见的一个元素，使用CSS可以轻松地实现这个效果。

nav {
  display: flex; /* 设置为flex布局 */
  justify-content: space-evenly; /* 将菜单项平均分布 */
  align-items: center; /* 将菜单项垂直居中 */
  background-color: #eee; /* 设置背景色 */
}

nav a {
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 设置字体颜色 */
  padding: 12px; /* 设置内边距 */
} 

以上是一个简单的CSS代码示例，其中对菜单项的样式进行了设置。使用flex布局可以方便地控制菜单项的间距和排布方式，同时也可以使宽度自适应，适用于不同大小的屏幕。

同时，也可以在鼠标悬停或者选中时，对菜单项的样式进行修改：

nav a:hover,
nav a:active {
  color: #fff; /* 设置字体颜色 */
  background-color: #666; /* 设置背景色 */
} 

使用:hover和:active伪类可以分别对鼠标悬停和选中状态进行样式的修改，使横向导航条更加动态丰富。

以上是CSS实现横向导航条的简单示例，具体样式和效果可以根据项目需求进行调整和扩展。