2011-08-24 19 views
7

C'è un modo per allineare il pulsante di google plus a destra? Sembra che il pulsante g + mantenga un certo posto nel caso ci fossero più cifre. Sarebbe bello se il solution potesse usare solo css/html - nessun javascript.Pulsante Google+ rimuovi spazio libero/margine a destra | allineare a destra

aggiornamento
proprie attività è che Google ha cambiato un po 'API di pulsante 1+ da ieri, ma ancora sembra impossibile per allinearlo a destra.

aggiornamento 2
domanda è stata fatta il 24 ago '11. Da allora, Google+ è cambiato diverse volte. Non c'è più bisogno di spamare le risposte a questo post (ripetute e stesse risposte!). Le opzioni che tutti suggeriscono non esistevano al momento. Controlla i parametri su google + documentazione pagina web: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters

risposta

0

Proverei a inserire il pulsante in un div. Quindi renderei questo div più piccolo del pulsante per tagliare la parte destra del pulsante. Devi modificare le opzioni position e overflow nel tuo css.

+0

Cosa succederà se la pagina Web riceverà (in un momento) un conteggio a 4 cifre di +1? Non voglio manuallare la larghezza di aggiornamento di questo div ogni tanto. – seler

0

riscontrato questo problema esatto ieri. avvolto il namedspaced più un tag in un div e flottato a destra.

si può sempre usare un foglio di stile per sovrascrivere gli stili inline che Google invia il filo

così per il markup come questo:

<div class="myPlusOneWrapper"> 
    <div id="theActualPlusOneWrapper" style="whatever google send down the wire"> 
     <!-- blah --> 
    </div> 
</div> 

si potrebbe avere questo CSS:

.myPlusOneWrapper 
{ 
    float: right; 
} 

.myPlusOneWrapper > div 
{ 
    width: auto !important; 
} 

la larghezza si adatterà quindi a essere ampia come deve essere, e avrà la precedenza sullo stile in linea di google

JS Fiddle

+0

Non riesco a farlo funzionare. Potrebbe per favore mostrare un esempio? forse jsfiddle. – seler

+0

quale browser stai usando? il selettore '>' discendente funzionerà solo nei browser più recenti (IE8 +, la maggior parte degli altri browser ha supportato per un po ') – WickyNilliams

+0

So lol. Per favore, mostra che funziona. – seler

2

Se volete allineare il pulsante +1 a destra, si dovrebbe utilizzare il fattore di forma 'alta', dal momento che si espande su, o configurare il pulsante +1 per non visualizzare il conteggio. Ciascuno di questi rimuoverà lo spazio allentato per i numeri sul lato destro. La documentazione che spiega come fare questo può essere trovata qui: http://code.google.com/apis/+1button/#button-sizes

Ora che il padding è andato sul lato destro è possibile utilizzare i CSS per allineare il pulsante.

2

Impostare l'attributo align-right per il tag +1 pulsante.

<g:plusone align="right"></g:plusone> 
+1

Da quando ho fatto questa domanda, il pulsante Google+ è cambiato (molte volte). Questa opzione non esisteva un anno fa. :) – seler

4

Al giorno d'oggi basta aggiungere al vostro data-align="right"<div>. Per esempio:

<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div> 

che manterrà il contenuto del allineati a destra.

+0

La data del check out è stata postata. Da allora google + api è cambiato più volte e la domanda non è più valida. – seler

+0

È una vecchia domanda, ma sono ancora arrivato perché non riuscivo a capire come allineare correttamente il pulsante di Google+, quindi per aiutare gli altri ha senso inserirlo qui. – Gavin

1

La soluzione più semplice che ho trovato è quella di avvolgere il div plus di un pulsante in un contenitore, dare al contenitore una classe e uno stile che galleggiano come mai richiedono.

<!-- Google +1 button --> 
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div> 

.plusonealign { 
    float: left; 
} 
Problemi correlati