css中把li的文字变成横排

在CSS中，我们经常会使用列表（list）来展示一些信息，而在列表中，每个条目的文本通常是以竖排的方式呈现的，这样可能不太方便用户查看。下面将介绍如何将li中的文字变成横排的方式呈现。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #ccc;
}

li:nth-child(odd) {
  background-color: #eee;
}

li span {
  display: none;
}

li:hover span {
  display: inline-block;
  position: absolute;
  top: -30px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
} 

以上是一个基本的示例，通过将ul的样式设置成没有列表样式（list-style: none），以及去除margin和padding的样式，可以避免出现不必要的间距。而将li的样式设置成display: inline-block，就可以让每个li元素横排显示。

代码中使用了:nth-child(odd)伪类选择器，来对列表进行间隔斑马线的样式设置。通过在li中嵌套一个span标签，可以实现鼠标悬停时弹出一个提示框的效果。需要注意的是，这里将span的display设置为none，是为了让其默认隐藏。

总之，通过这种方式，我们可以更加灵活地对列表进行样式的设置，让用户更方便地查看和使用页面中的信息。