2

На HTML-страничке указал стиль:

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

За ним следует описание стиля img2, img3, 4, 5, 6... В конце, как положено, закрыл стиль.

Затем следует вставка самих картинок:

<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>

Но каждая картинка вставляется на новой строке.

Как сделать так, чтобы картинки шли одна за другой, без пропусков, без переносов, одной сплошной линией?..

Заранее благодарен.

1 ответ 1

4

Есть два варианта:

display: inline-block;

или

float: left;

А вообще для чего столько классов? Если у вас стили разные используйте id. А общие свойства вынесите в общий класс. Например:

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

и т.д.

4
  • Всё супер. Работает, как и надо было. Большое спасибо. Размеры картинок разные. Значит, общее свойство у них будет только display:inline-block Пусть остается как было... Мне так привычнее. Большое спасибо за ответ. Очень помог.
    – Mimino
    Commented 29 нояб. 2011 в 9:35
  • 1
    Вопрос не забывайте закрывать. И буду благодарен за плюсик.
    – invincible
    Commented 29 нояб. 2011 в 9:37
  • Жаль, недостаточно очков уважения. Я тут новенький. Я отметил ответ, как правильный. Большое спасибо
    – Mimino
    Commented 29 нояб. 2011 в 9:42
  • Кстати inline-block для <a> работает нормально, но если вдруг будешь делать тоже самое например для <li>, то для кроссбраузерности для старых браузеров (firefox2; ie6,7) нужно будет хаки добавлять.
    – invincible
    Commented 29 нояб. 2011 в 9:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.