当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

15、ul li图文列表,margin-right导致右侧空白的解决方案

上传时间:2020-05-20             浏览次数:83

一、现象

li为统一样式(width加margin-right)时,第三个li自动换行。如果是不让他换行,则右侧会有一个margin-right距离的空白。

二、原因

当li为统一样式(width加margin-right)时,由于ul的宽度默认只有图中红框的宽度,而三个width加上三个margin-right的宽则超出了ul的宽,所以第三个li会自动换行。

三、解决办法

解决方案一:

设置ul的宽度为三个li的总宽加上三个margin-right的和。外层div设置overflow:hidden

解决方案二:

设置ul的margin-right为li的margin-right的负值(比如li{margin-right:30px } ,则设置ul{margin-right:-30px})

解决方案三:

使用弹性盒布局,设置ul{display:flex;justify-content:space-between;flex-wrap:wrap};

这时候的li不用为margin-right设值,justify-content:space-between会让li横向均匀的排满空间,li之间会自动留出间隔。flex-wrap:wrap控制自动换行。(注意:考虑到兼容性,PC端不建议使用这种方案。)

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们