Перенос строки на кнопке

[px379]

Здравствуйте! Столкнулся с такой проблемой, есть кнопка, на кнопке надпись в одну строку. Надо ниже, добавить еще одну строку. <br /> не катит, он переносит не только текст, но и саму кнопку.

 

 

HTML

<div id="shop"><a href="http://mebelny.in.ua/shop/" class="friend" target="_blank" title="Партнер сайта"/>ИНТЕРНЕТ МАГАЗИН</a></div>

CSS

.friend{text-decoration:none; text-align:center;  padding:10px 33px;  border:solid 1px #850101;  -webkit-border-radius:0px 4px 4px 0px; 	 				 border-radius: 0px 4px 4px 0px; 					-moz-border-radius-topleft:0px; 					-moz-border-radius-topright:4px; 					-moz-border-radius-bottomleft:0px; 					-moz-border-radius-bottomright:4px;   font:14px Arial, Helvetica, sans-serif;   color:#ffffff;  background:#850101;  -webkit-box-shadow:inset 0,0px 0,0px 1,1px #ffffff,#ffffff;  -moz-box-shadow:inset 0px 0px 1px #ffffff;  box-shadow:inset 0px 0px 1px #ffffff;      }.friend:hover{ padding:10px 33px;  border:solid 1px #ce1e1e;  -webkit-border-radius:0px 4px 4px 0px; 	 				 border-radius: 0px 4px 4px 0px; 					-moz-border-radius-topleft:0px; 					-moz-border-radius-topright:4px; 					-moz-border-radius-bottomleft:0px; 					-moz-border-radius-bottomright:4px;   font:14px Arial, Helvetica, sans-serif;  color:#ffffff;  background:#ce1e1e;  -webkit-box-shadow:inset 0,0px 0,0px 1,1px #ffffff,#ffffff;  -moz-box-shadow:inset 0px 0px 1px #ffffff;  box-shadow:inset 0px 0px 1px #ffffff;     }#shop{margin-top: 9px;}

[Switch74]

<br> например

[iKNG]

<br> не катит

<br> например

 

Br переносит саму кнопку тоже, так как тег a по умолчанию inline. Надо добавить в класс friend display: block; и br будет работать как надо Вам.

[Great Rash]

http://jsfiddle.net/g7rus/

[px379]

Спасибо за помощь =)

 

 

<br> не катит

 

 

<br> например

 

Br переносит саму кнопку тоже, так как тег a по умолчанию inline. Надо добавить в класс friend display: block; и br будет работать как надо Вам.

 

 

http://jsfiddle.net/g7rus/

Спасибо за помощь =)