Two thumbnails img stacking on each other rather than in a column roll using UL LI, please help

I have got two thumbnails img, each in 'li' under 'ul' but was stacking on top of each other rather than two in a roll, side by side. Below is html structure:

    <div id="printGallery">
        <ul><li>
            <a href="Pics/PrintsImages/target.jpg" title="Target magazine concept design." border="0">
            <img src="Pics/PrintsImages/targetMini.jpg" alt="targetMini" width="45" height="45" border="0" /></a>
            </li>
            <li>
            <a href="Pics/PrintsImages/Interra.jpg" title="Target magazine concept design." border="0">
            <img src="Pics/PrintsImages/InterraMini.jpg" alt="InterraMini" width="45" height="45" border="0" /></a>
            </li>

        </ul>

And below is my CSS style:

        #printGallery ul { list-style: none; position: fixed; }
        #printGallery ul li { display:inline; }
        #printGallery ul img {
                    border: 2px solid  #afd2e2;
                    border-width: 2px 2px 8px;
                    margin-top: 90px;
                    margin-left: 190px;
        }
        #printGallery ul a:hover img {
           开发者_StackOverflow中文版         border: 2px solid  #c7c8c9;
                    border-width: 2px 2px 8px;
                    color: #fff;
        }
        #printGallery ul a:hover { color: #c7c8c9; }
</style>

I have tried using the float right and even adding "printGallery ul img img" just to move the other thumbnail but nothing happens. Please help.

You only need to

#printGallery li { float: left }

That's all.