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

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;
    }}

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

This is more of a css question. You have one of to options, using an inline list or a float.

personally i line inline list, you could also use a table but that is considered bad practice. You could also use java script to calculate the position, which is also bad practice if used improperly.

W3schools.com should be a good reference if you dont know how to implement these properties in css.

Next time please replace your php with static information so it looks better :) cheers