Side by side items with images using CSS

Question

Hi,

I am trying to display images side by side using just css. The problem is that the images are not displaying inline but as a list (I am using the tag to accomplish this). Maybe I am using the wrong type of tag or my css is just wrong (see below):

ul { float: left; width: 15em; /* width is changed */ margin: 0; padding: 0; list-style-type: none; list-style-position: outside; } li { float: left; width: 100%; margin: 20%; }

I could use some help =)

Answer 1

Why not use span tags rather than ul/li? Using the list tags is probably why you're getting a list.

Answer 2

are you trying to do this?

ul
 li  img 1 /li
 li  img 2 /li
/ul

if so, your css should be on the li element

li { display:block float:left padding: 0 margin: 0} 
ul { padding:0 margin 0;}

Answer 3

try this:

ul.gallery {
   height:425px;
   width:200px;
   list-style-type: none;
}
ul.gallery li {
   border:1px solid #BBBBBB;
   float:right;
   height:50px;
   margin-right:7px;
   margin-top:7px;
   width:50px;
}

And the (x)html

<ul class="gallery">
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li> 
    <li><img src="images/0001.jpg" /></li>
</ul>