Php 在图像滑块中对齐图像仅适用于chrome

我正在编辑一个包含图像滑块的网站，该滑块可以并排显示两幅图像，但是当我在chrome中查看该网站时，这些图像不会相互关联，如下所示：

我使用php和html从数据库中获取数据，并根据收集的数据显示图像。我曾尝试在css中单独定位图像，但它要么不起作用，要么影响两个图像

是否有一种正确的方法来单独定位图像，或者如何解决这个问题

php代码：

<?
                $result = $mysqli->query("SELECT * FROM stock");
                while($obj = $result->fetch_object())
                {
                    if($obj->id&1)
                        echo "<u1>"; ?>


                    <li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>">
                        <a href="#"><img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt=""></a>
                        <h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />&pound;<?=$obj->price?> each</h4></li>

---

将

放置在宽度足够大的位置，使其能够并排容纳两个图像，并为ul提供style='display:inline'。。您将在线获得图像
这更像是一个css问题。 您可以使用内联列表或浮点数选择其中一个选项
就我个人而言，我行内联列表，您也可以使用表，但这被认为是不好的做法。 您还可以使用java脚本来计算位置，如果使用不当，这也是一种不好的做法
如果您不知道如何在css中实现这些属性，那么W3schools.com应该是一个很好的参考

---

下次请用静态信息替换php，这样看起来更好：）干杯
我尝试将li类的css设置为内联列表，但对图像没有影响。图像也是图像滑块的一部分

@media screen and (-webkit-min-device-pixel-ratio:0){
   #mi-slider li {
    vertical-align: top;
    }}