css两个li同一行

CSS 中有一种常用的技巧是让两个 <li> 同时在一行显示。这种情况经常在导航栏、面包屑或者轮播图等场景中被使用到。接下来我们就来看看如何实现这个效果。

首先，我们需要将两个 <li> 设置为 display: inline-block;，这样它们才能在同一行显示。然后为了防止它们被分成两行，需要将它们的父元素设置为 white-space: nowrap;。同时，还需要添加 font-size: 0; 来去除两个 <li> 中间的空白。

.nav {
  white-space: nowrap;
}

.nav li {
  display: inline-block;
  font-size: 0;
} 

以上是用最基本的 CSS 实现的方法，但这种方法存在一个问题——两个 <li> 之间存在一定的间隔。这个问题的原因是因为我们在代码中添加了空格和换行，使两个 <li> 在 HTML 代码中间存在一个空格。

解决这个问题的方法也比较简单，就是将两个 <li> 写在同一行。如下所示：

<ul class="nav">
  <li>导航1</li><li>导航2</li>
</ul> 

将两个 <li> 写在同一行后样式就会变成如下：

.nav {
  white-space: nowrap;
}

.nav li {
  display: inline-block;
  font-size: 0;
} 

这样，两个 <li> 在同一行就不会存在间隔的问题了。而且，这种方法也相对更易读易于维护。希望这篇文章对你有所帮助！