将图像滑块中的图像对齐仅用于镀铬

Question

I'm editing a website that contains an image slider that displays two images side-by-side, however when i view the website in chrome the images are not inline with each other like so: http://i754.photobucket.com/albums/xx182/rache_R/Untitled-1_zps6f3014ef.jpg

I use php and html to get data from a database and display the images based on the data gathered. I have tried to target the images individually in my css but it either doesn't work or effects both images.

Is there a correct way of targeting the images individually or how can i fix this?

php code:

<?
                $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>

so i managed to solve it:

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

Answer 1

Place the < ul> having a width so much that it can hold both images side by side and give style='display:inline' for the ul.. You will get the images inline