On the HTML-page indicated style:

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

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

Then follows 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 the other, without gaps, without hyphenation, in one solid line? ..

Thanks in advance.

    1 answer 1

    There are two options:

     display: inline-block;

    or

     float: left;

    In general, why so many classes? If you have different styles, use id. And make common properties in a general class. For example:

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

    etc.

    • Everything is super. Works as it should. Thank you very much. The sizes of the pictures are different. This means that they will only have a common property: display: inline-block Let it remain as it was ... I am so used to it. Thank you very much for your answer. Very helpful. - Mimino
    • one
      Do not forget to close the question. And I will be grateful for the plus sign. - invincible
    • Sorry, not enough respect points. I am new here. I marked the answer as correct. Thanks a - Mimino
    • By the way, the inline-block for <a> works fine, but if you suddenly do the same for example <li>, then for cross-browser compatibility for old browsers (firefox2; ie6,7) you will need to add hacks. - invincible Nov.