关于的display:inline-block之后同一行的元素错位问题

<ul>
    <li v-for="item in li">
        <img src="http://img1.qunarzz.com/sight/p0/1806/97/97f0cf5b6a44557ca3.water.jpg_200x200_003494e1.jpg" />
        <div class="lcontent">
            <div class="ltitle">天津海昌极地海洋公园</div>
        </div>
    </li>
</ul>

如上所示，容器默认overflow：hidden属性，当两个元素均设置为display:inline-block后，改变了两个元素的基线位置，会导致错位现象。。
解决方法：
①将两个元素的vertical-align属性设置为baseline之外的其他值（如top,midddle等）；
②不用vertical-align方法，改用float将两个元素实现居于一行显示。