Pictures wrap to new line

I specified the style on the HTML page:

.img1 {
  display:block;
  width:200px;
  height:35px;
  background:url(image.png);
}
.img1:hover {
  background:url(image2.png);
}

This is followed by a description of the style img2, img3, 4, 5, 6… At the end, as expected, I closed the style.

This is followed by the insertion of the pictures themselves:

<a class="img1" href="1"></a><a class="img2" href="2"></a><a class="img3" href="3"></a><a class="img4" href="4"></a><a class="img5" href="5"></a>

But each picture is inserted on a new line.

How to make the pictures go one after another, without gaps, without hyphens, in one solid line?..

Thanks in advance.


Answer 1, authority 100%

There are two options:

display: inline-block;

or

float: left;

Why are there so many classes? If you have different styles use id. And take out the general properties in the general class. For example:

.imgCls { display:inline-block; width:200px; height:35px; }
#img1 {background:url(image.png); } 
#img1:hover { background:url(image2.png); }

etc