<ul>
    <li class="normal-block">
        <img class="templateImg" src="static/images/reportDayDefault.png" alt="" width="108px">
        <p style="font-size:12px;color:-sharp555;padding-left:15px;margin-top:10px;">

    </li>
    <li v-for="(item,index) in templateList" :key="index" class="normal-block">
        <img class="templateImg" src="static/images/reportDayNormal.png" alt="" width="108px">
        <p style="font-size:12px;color:-sharp555;padding-left:15px;margin-top:10px;">{{item.name}}

        <img src="static/images/reportDefaultDelete.png" class="sameStyleImg deleteIcon" v-if="!item.deleteHover" alt="" title="" @mousemove="mouseIt(index,"delete")" @click="deleteTemplate(index)">
        <img src="static/images/reportHoverDelete.png" class="sameStyleImg deleteIcon" alt="" title="" v-if="item.deleteHover" @mouseout="mouseIt(index,"delete")" @click="deleteTemplate(index)">
        <img src="static/images/reportDefaultEdit.png" class="sameStyleImg" v-if="!item.editHover" alt="" title="" @mousemove="mouseIt(index,"edit")" @click="editCurrent(index)">
        <img src="static/images/reportHoverEdit.png" class="sameStyleImg" alt="" title="" v-if="item.editHover" @mouseout="mouseIt(index,"edit")" @click="editCurrent(index)">
    </li>
    <li class="normal-block" v-if="templateList.length < 5" @click="newTemplate">
        <p style="font-size:12px;color:-sharp555;padding-left:15px;margin-top:10px;"> + 

    </li>
</ul>

ul {
    height: 180px;
}

.normal-block {
    display: inline-block;
    width: 110px;
    height: 140px;
    margin: 20px 10px 20px 11px;
    line-height:40px;
    border:1px solid -sharpaaa;
}

.normal-block:hover {
    border:1px solid -sharpfb9240 !important;
    box-shadow: -sharpfb9240 0 0 2px;
}

.sameStyleImg {
    margin-bottom: 20px;
    cursor: pointer;
}

.deleteIcon {
    margin-left: 50px;
}

this is a ul list I wrote. The li of the list is divided into three pieces, two of which contain a picture.
but the actual effect is as follows:

li on the same line is not on the same height.
through the two lines drawn, I guess img squeezed the other elements of the industry to the bottom. What CSS property does
need to set so that the picture can be aligned horizontally in the same line?