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

一、现象

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端不建议使用这种方案。）