[Resolved] Footer: Aligning Labels horizontally

[Kevin]

Hi,

I’m trying to align 3 Labels on the footer:
HTML:

<p><br>
	<span>	
		<label><span onclick="toggleGoogle Analytics()"class="gaan checked">AN</span></label>
		<label><span onclick="toggleGoogle Analytics()"class="gaaus">AUS</span></label>
		<label><span class="gatxt">Google Analytics</span></label>
	</span>
</p>

CSS:

.gaan:hover {
        background:#42AE49; 
        border: 1px solid #42AE49; 
        color:#FFFFFF
    }
                
    .gaaus:hover {
        background:#E84838; 
        border: 1px solid #E84838; 
        color:#FFFFFF;
    }

    .gaan, .gaaus { 
        font-size:0.8em;
        color:#FFF;
        display: inline-block;
        border: 1px solid #FFFFFF;
        padding:0em 0.5em;
        margin-right:5px;
        text-align:center;
        cursor:pointer;
        border: 1px solid #777777; 
        color:#777777
    }
    .gatxt{font-size:0.8em;color:#FFF;}
    .checked.gaan{
        background:#42AE49; 
        border: 1px solid #42AE49; 
        color:#FFFFFF
    }
    .checked.gaaus{
        background:#E84838;
        border: 1px solid #E84838; 
        color:#FFFFFF;
    }

How do I get the labels to all align horizontally next to each other?

Thanks!

[Leo]

Hi there,

Not quite sure if I understand.

So you want all three in the same line? If so it doesn’t work if you put them in one <p> or <div>?

[Kevin]

Hi Leo,

Yes .. all 3 on horizontally next to each other.
It doesn’t seem to work if I put them in one <p> or <div>.

Here is an example of a site that has it correctly > goo.gl/qVUrSE

[Tom]

If you add your first code into an HTML widget, it should work automatically.

It looks like it’s being added to a text widget right now, which adds paragraph and <br> elements.

[Kevin]

Thanks! That worked perfectly.

[Tom]

You’re welcome 🙂

[Author]

Posts