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

Тема в разделе "Веб-дизайн", создана пользователем Damasc, 24 сен 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Здравствуйте!

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

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

    PHP:

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

     
  2. Kewin

    Kewin Постоялец

    Регистр.:
    15 сен 2010
    Сообщения:
    73
    Симпатии:
    8
    попробуй использовать тег <span> </span>
     
  3. LodeRunner

    LodeRunner

    Регистр.:
    10 фев 2010
    Сообщения:
    220
    Симпатии:
    12
    Damasc
    Я не понял, в чем у тебя проблема то?
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    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;
    }
     
    Damasc нравится это.
  5. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    К сожалению не помогло. Выглядит это следующим образом.
     

    Вложения:

    • share.JPG
      share.JPG
      Размер файла:
      6,7 КБ
      Просмотров:
      9
  6. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Точнее так
    Код:
    <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>
    
     
    Damasc нравится это.
Статус темы:
Закрыта.