How to display html objects in Content Editor Web Part horizontally?

Question

I'm trying to create a row of clickable buttons that enlarge on hover using a Content Editor Web Part. Here is the code:

<style type="text/css">

.thumbnail {
position:relative;
width:100px;
height:80px;
display:block;
}

.thumbnail:hover {
width:200px;
height:160px;
z-index: 999;
}

</style>​​​​​​​​​​​​​​​​ 

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/> </a>

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/> </a>

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/>​​ </a>

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/></a>​​

It's working pretty good, but the CEWP keeps displaying the clickable images in a column; I would like instead to have it in a row. How can I do that?

Also, be aware that I prefer to do NOT modify the master page. Thanks!

Answer 1

Try this in your CSS

a img{
  float:left;
}