Помогите разместить Share кнопки в строку

Статус
В этой теме нельзя размещать новые ответы.

Damasc

Участник
Регистрация
5 Мар 2009
Сообщения
174
Реакции
6
Здравствуйте!

Помогите разместить коды шарринга в соц сетях в строку. Если размещать "как есть" - некоторые кнопки будут с новой строки, некоторые криво располагаться.

Вот коды соц. сетей для кнопок:

PHP:
<a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a>
<script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>


<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Опубликовать</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?10" charset="windows-1251"></script><script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
 
попробуй использовать тег <span> </span>
 
Damasc
Я не понял, в чем у тебя проблема то?
 
HTML:
<div class="shares">
<a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a>
<script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Опубликовать</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?10" charset="windows-1251"></script><script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
</div>

в стили
HTML:
.shares {
white-space:nowrap;
}
 
К сожалению не помогло. Выглядит это следующим образом.
 

Вложения

  • share.JPG
    share.JPG
    6,7 KB · Просмотры: 9
Точнее так
Код:
<style>
.shares {
white-space:nowrap;
}

.fix {display:inline; float:left; padding-left:3px;}
</style>

<div class="shares">
  <div class="fix">
   <a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a>
   <script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>
  </div>

  <div class="fix">
   <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
   <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  </div>
   
  <div class="fix">
   <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Опубликовать</a>
   <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
  </div>
  
  <div class="fix">
    <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?10" charset="windows-1251"></script>
    <script type="text/javascript"><!--
    document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
   --></script>
  </div>
   

</div>


Т.к. подгружается элемент из стороннего script, в котором могут быть любые стили, перекрывающие свои, то лучше определить всё в таблицу.
Код:
<table border="0" cellpadding="0" cellspacing="0" width="31%" style="padding-left:5px">
	<tr>
		<td width="80">
		    <a class="mrc__share" href="http://connect.mail.ru/share">В Мой Мир</a>
            <script src="http://cdn.connect.mail.ru/js/share/2/share.js" type="text/javascript" charset="UTF-8"></script>
        </td>
		<td width="45" align="right">
		    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
		    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
		</td>
		<td style="padding-left:0px" width="133">
		    <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Опубликовать</a>
		    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
		</td>
		<td valign="top">
		     <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?10" charset="windows-1251"></script><script type="text/javascript">
		     <!-- 
             document.write(VK.Share.button(false,{type: "round", text: "Сохранить"})); 
             -->
             </script> 
		</td>
	</tr>
</table>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху