css中把无序列表变成横向导航

CSS是一种用于美化网页的语言，可以通过CSS样式表来控制网页的样式、布局和效果。其中，将无序列表转换成横向导航是一个常见的操作。

首先，需要将无序列表设置为行内块元素，这样才能让它们横着排列：

ul {
  display: inline-block;
  list-style: none; /*去除列表标记*/
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  margin-right: 20px; /*为每个列表项添加右边距，美观一些*/
} 

通过上述代码，我们已经能够实现将无序列表横着排列了。但是，这样的效果远远不够优美，还需要通过CSS来美化这些导航。

将鼠标悬停在导航上能够给用户更好的视觉反馈，所以我们需要添加一些hover的效果：

ul li:hover {
  background-color: #eee; /*设置悬停时的背景颜色*/
} 

接下来是一些其他的美化效果：

ul {
  background-color: #f2f2f2; /*设置背景颜色*/
  padding: 10px; /*为整个导航添加内边距*/
}
li {
  font-size: 18px; /*设置列表项文本大小*/
  text-transform: uppercase; /*将字母转换成大写*/
  padding: 10px; /*为每个列表项添加内边距*/
}
a {
  color: #333; /*设置文字颜色*/
  text-decoration: none; /*去除下划线*/
} 

通过以上的CSS样式设置，我们可以将无序列表变成优美的横向导航了。当然，还有很多其他的CSS样式可以使用，这只是其中的一部分。