作者：手机用户2602909207 | 来源：互联网 | 2023-08-15 15:47
场景：有一排横向排列的图标，要实现鼠标hover图标的时候图标上移，鼠标离开时图标归位。
li->display: inline-block
li:hover{ margin-top:-10px;}
问题：鼠标移过的时候所有的li都向上移动。
原因：inline-block使li变成了行内块元素，就是说所有的li块被包含在一个“行”里，一个li的margin值发生改变即代表整个行的margin发生改变（也就是常说的外边距合并），所以出现上述问题。
解决：为了实现每个li能横向排列又能互不“藕断丝连”，将inline-block改为float:left. 然后每个li实现hover时便能实现独自的margin值改变进行一个移动。原理就是left之后元素依然是块元素，与身边的的其他li没有什么关系，所以就不存在连带效应。
京公网安备 11010802041100号