Ссылки картинкой подряд.

[Cherry06]

Здравствуйте.У меня такая проблема..Сделала я на сайте несколько ссылок картинкой и у меня они все идут вот так: 

1картинка

2картинка

и т.д.

 

А мне нужно чтобы было все вот так:

 

1 картинка,2картинка и т.д.

Т.е нужно что бы ссылки картинкой шли друг за другом (подряд),а не с новой строчки.

 

[npofopr]

display: inline-block для ссылок, или float: left;

[Cherry06]

display: inline-block для ссылок, или float: left;

В стилях вставила так: 

img { border: none; margin-left: 800px; margin-top: 50px; no-repeat; align-top: 50px; float: left; } И с "display: inline-block" все равно не получается. 

 

В html у меня стоит такой код: 

 

<a href="адрес ссылки" ><img src="ссылка" width="120" height="30" alt="Пример"></a>

 

<a href="адрес ссылки" ><img src="ссылка" width="120" height="30" alt="Пример"></a>

[rus]

вам же сказали - для ссылок

[altiny]

HTML:

<a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a>

<a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a>

CSS:

a {

   display:inline-block; /* можно заменить на float:left; */

}


img {

   width:120px;

   height:30px;

}

[Cherry06]

вам же сказали - для ссылок

"ссылок картинкой" картинка,которая идет ссылкой.ссылка картинкой. 

[rus]

 

вам же сказали - для ссылок

"ссылок картинкой" картинка,которая идет ссылкой.ссылка картинкой. 

 

что за абракадабра?

a {display: inline-block;илиfloat: left; // только ширину хотя бы auto надо указать}

[Cherry06]

 

HTML:

<a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a><a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a>

CSS:

a {   display:inline-block; /* можно заменить на float:left; */}img {   width:120px;   height:30px;}

 

Спасибо,получилось. А можно как нибудь в стилях переименовать "img" а то к img относятся автоматически все картинки на странице,а мне надо,чтобы относились только мои три ссылки картинкой.Как это сделать?

[altiny]

 

 

HTML:

<a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a><a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a>

CSS:

a {   display:inline-block; /* можно заменить на float:left; */}img {   width:120px;   height:30px;}

 

Спасибо,получилось. А можно как нибудь в стилях переименовать "img" а то к img относятся автоматически все картинки на странице,а мне надо,чтобы относились только мои три ссылки картинкой.Как это сделать?

 

Для этого нужно использовать более специфичный селектор. Например, назначить класс для тега <img> следующим образом,

 <img src="адресКартинки" class="имяКласса"> 

. А в стилях производить выборку именно по имени класса, то есть 

.имяКласса {    width:120px;    height:30px;}

[Cherry06]

 

 

 

HTML:

<a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a><a href="адрес ссылки" ><img src="ссылка" alt="Пример"></a>

CSS:

a {   display:inline-block; /* можно заменить на float:left; */}img {   width:120px;   height:30px;}

 

Спасибо,получилось. А можно как нибудь в стилях переименовать "img" а то к img относятся автоматически все картинки на странице,а мне надо,чтобы относились только мои три ссылки картинкой.Как это сделать?

 

Для этого нужно использовать более специфичный селектор. Например, назначить класс для тега <img> следующим образом,

 <img src="адресКартинки" class="имяКласса"> 

. А в стилях производить выборку именно по имени класса, то есть 

.имяКласса {    width:120px;    height:30px;}

Все,сделала. В html у меня: 

 

<a href="адрес ссылки"><img src="тут ссылка кртинки" class="img2" alt="Пример"></a>

<a href="адрес ссылки"><img src="тут ссылка картинки" class="img2" alt="Пример"></a>

 

А в css у меня:

 

img2 {

 

  width:120px;

   height:30px;

   margin-left: 440px; - Если я ставлю этот код,то у меня снова картинки идут друг под другом,а не в строчку,почему?

   

} 

 

Так же стоит стиль про ссылки:

 

.a {

   display:inline-block; /* можно заменить на float:left; */

   

} 

 

Но у меня почему то опять картинки стоят под друг другом..из за этого кодика "margin-left: 440px;",но мне его нужно обязательно указать,что бы подвинуть картинки.

[altiny]

Здесь проблема в том, что Вы указываете отступ для каждой картинки с классом img2. То есть если они даже и уместятся на одной строке, то между ними будет расстояние в 440px, если не уместятся, то соответственно правая картинка будет перенесена вниз. Оберните блок с ссылками в div и для него уже задайте margin-left:440px; Например, вот так: http://dabblet.com/gist/7386421

Edited December 8, 2013 by altiny