colocación de los botones facebook like y google + en línea?

¿Alguien tiene algún truco para alinear estos dos botones en una página? Por defecto, la versión iframe del botón de me gusta de Facebook aparece debajo del botón de google plus o viceversa. ¿Hay algún truco de CSS para mantenerlos en línea?colocación de los botones facebook like y google + en línea?

Este es mi intento actual

<div style="float:left;width:100px;"> 
    <!-- Place this tag where you want the +1 button to render --> 
    <g:plusone></g:plusone> 

    <!-- Place this tag after the last plusone tag --> 
    <script type="text/javascript"> 
     (function() { 
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
      po.src = 'https://apis.google.com/js/plusone.js'; 
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
     })(); 
    </script> 
</div> 
<div style="float:left;width:auto;"> 
    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmy_site&amp;layout=button_count&amp;show_faces=false&amp;width=350&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px;" allowTransparency="true"></iframe> 
</div>

Fuente

2011-09-28 Paul

ponerlos en una lista - esto es lo que he hecho (con perdón del JSP)

<ul class="like-buttons"> 
<li class="g-plus-one"> 
    <g:plusone count="false"></g:plusone> 
</li> 
<li class="twitter-like"> 
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="<%= url %>" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
</li> 

<li class="fb-like"> 
    <iframe src="http://www.facebook.com/plugins/like.php?href=<%= facebookUrl %>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px; color:#fff!important;" allowTransparency="true"></iframe> 
</li>

Y el css:

ul.like-buttons{ 
float: left; 
list-style: none; 
margin: 5px 0 20px 0; 
padding: 0; 
width: 100%; 
} 

ul.like-buttons li{ 
    display: block; 
    float: left; 
    margin-right: 10px; 
} 
li.twitter-like{ 
    margin-top: 2px; 
}

Fuente

2011-09-28 13:58:23

great idea! Funciona como un campeón, gracias – Paul

¡Eso es lo que estoy buscando! Gracias. –

Probablemente los padres ancho div es menor que la suma de esta anchura de dos marcos flotantes.

Su FB iframe tiene ancho 350px. Pero el botón me gusta es más pequeño.

Fuente

2011-09-28 13:58:03 Narek

Hay que incluirlos en un envoltorio div . Sin embargo, su real está mostrando en la misma línea para mí

su código: http://jsfiddle.net/HbYn3/

Fuente

2011-09-28 13:59:02 jflaflamme

Usar la siguiente google plus render fuente:

<div style="margin-top: 11px;"><li class='g-plusone' data-size='tall'/></div></div>

Puede ajustar el margen con su requisito. Fue mi requerimiento Por Kuwar Dheeraj Srivastava en One Click Lyrics India

Fuente

2015-04-26 21:21:46

Lo he dado sincronizado en el segmento div ... –

Y se ve muy bien como usuario o desarrollador ... –

¿Hay alguna otra manera? Entonces dime ... ¿qué es más simple y más funcional que esto ...? –

colocación de los botones facebook like y google + en línea?

Respuesta

Cuestiones relacionadas