Putting some Images in a line

Here's a picture of my current situation : alt text http://grab.by/FUM But I don't want the images below each other, I want them in a line, a straight horizontal line. This is the code I have currently:

<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-ins开发者_如何学编程ide">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
<div class="slice5"></div>
<div class="slice6"></div>
<div class="slice7"></div>
<div class="slice8"></div>
<div class="slice9"></div>
<div class="slice10"></div>
<div class="slice11"></div>
</span>

So how would I make all the images be in a straight line?

Try floating the images to the left. For example:

.image {
    float: left;
}

You should set the class for all the divs to the same class, something like slices, and then go with:

 .slices {
     display: inline; 
 }

DIVs are block level elements and will cause each slice to be on it's own line. You can either change the display property of those divs to be inline, or use SPANs instead.

There's solutions to your problem, and then there's solutions to your problem.

The immediate fixup is to make the divs display:inline or float:left. Divs are naturally block which means each one will fill the entire width of their container, so they stack below each other. Inline makes them act like text and shrink to the size of their content, and sit next to each other. Floating works more-or-less similarly.

The better fixup is to avoid those divs altogether. Can you just use <img>? That's usually ideal.