inline-block elements, displayed above and below the same line

Two elements use inline-block. When displayed side by side, they will be displayed up and down, giving the impression that they are not on the same line.


Reason: One of the elements used overflow:hidden, which caused a baseline change


Solution: 1. Another element also adds overflow: hidden (disadvantage: setting line-height does not work)
     2. Use vertical-align: middle attribute on the element that uses overflow

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324626944&siteId=291194637