今天在写横向轮播的时候,碰到了一个问题,我需要让li横向排列,但是遇到父元素边框的时候,li会自动换行,如下图:

图1:

去除display:inline-block默认间距

这是由于float:left造成的,引用官方描述:“浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止”

我们要解决这个问题,就要从根源float:left下手,换成display:inline-block

从我的实际代码的结构分析(结构:div(容器)>ul>li): 

去除display:inline-block默认间距

图2:

去除display:inline-block默认间距

给li的父元素ul添加white-space: nowrap;

图3:

去除display:inline-block默认间距

图3的作用是让li不换行

注:但是!问题来了!用了inline-block以后,在图5中可以明显看到横向排列的元素,间距变大了!

不多说,直接上粗暴的解决方案:在每个 结束标签 和 第二个开始标签 处,添加注释,如图4

图4:

去除display:inline-block默认间距

图5:

去除display:inline-block默认间距

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-21
  • 2022-12-23
  • 2021-11-07
  • 2022-12-23
  • 2022-12-23
  • 2021-11-09
猜你喜欢
  • 2022-12-23
  • 2021-06-10
  • 2021-08-11
  • 2022-12-23
  • 2021-05-27
相关资源
相似解决方案