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>
在同一行就不会存在间隔的问题了。而且,这种方法也相对更易读易于维护。希望这篇文章对你有所帮助!
粉丝
0
关注
0
收藏
0