html li水平图像css代码混乱我的导航栏

Question

我试图制作包含4张图片的div。我正在使用标签和li和a，因为我可以轻松更改图像，而不需要为每个图像制作div。我的网站看起来像是连续三张图片。当您将鼠标悬停在其上时，我会显示最终图像。这是中间的。我必须使用div类作为中间图像。问题是在我的CSS中我使用逗号为ul，li会弄乱我的导航栏但是完美地对齐我的图像。

到目前为止，这是我的代码： HTML：

    <div class="n-games_img.contain">
        <ul>
            <li>
                <a target="_blank" href="https://www.callofduty.com/wwii">
                    <img src="cod_ww2.png"; style="width:450px; left:19px;">
                </a>
            </li>
            <li style="left: 420px;">
                <a class="destiny" target="_blank" href="https://www.destinythegame.com/">

                <img src="destiny2_news_text.png"; style="width:450px;">
                <img class="destiny_top" src="destiny2_news.png"; style="width:450px;">
                </a>
            </li>
            <li style="left: 800px">
                <a target="_blank" href="https://www.ea.com/games/starwars/battlefront/battlefront-2">
                    <img src="starwars_battlefront2.png"; style="width:450px;">
                </a>
            </li>
        </ul>

    </div>

CSS：

       .n-games_img.contain{
    height: 350px;
    width:100%;
}

.n-games_img.contain ul{
    white-space: nowrap;


}

.n-games_img.contain ul , li { //bad code//
    clear:both;
    list-style:none;
    position: absolute;
    display: inline;
    float:left;
    max-width:450px;
}
.destiny{
    position: absolute;
    max-width:450px;
  margin: 0 auto;
}
.destiny img{
  list-style: none;
    position: absolute;
    display: inline;
    float:left;
    max-width:450px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
}

.destiny_top:hover{
    opacity:0;
}