Как разместить подряд изображения-ссылки на одной строке (html, css)?

Сайт: tech12 . 16mb . com/default.php
Создал изображение, которое меняется на другое, когда над ним проходит курсор. Но вот беда - как разместить несколько таких изображений на одной строке? У меня они находятся каждая на следующей.

HTML-код:

CSS-код:
.main {
display: block;
width:180px; height:55px;
background:url("Кнопки/Главная_1.png");
}
.main:hover {
background:url("Кнопки/Главная_2.png");
}
.articles {
display: block;
width:180px; height:55px;
background:url("Кнопки/Статьи_1.png");
}
.articles:hover {
background:url("Кнопки/Статьи_2.png");
}
.photos {
display: block;
width:180px; height:55px;
background:url("Кнопки/Фото_1.png");
}
.photos:hover {
background:url("Кнопки/Фото_2.png");
}