内联列表中的项目未对齐

Question

Hello I have been trying to get social media links to work inline. I'm adding in the embed code that tripadvisor gave me. When the page loads the tripadvisor link will start on the bottom side of the nav bar and then once the page has loaded it will move to about 5px above where it should be.

I made a js fiddle to illustrate what is happening:

<ul class="list-inline">
    <li>
        <div id="TA_socialButtonReviews926" class="TA_socialButtonReviews">
            <ul id="6oLG9rtu" class="TA_links HjEmbbr2fxOd">
                <li id="SW60z8" class="tZqr47d8">
                    <a target="_blank" href="http://www.tripadvisor.com.au/Hotel_Review-g255060-d256527-Reviews-The_Menzies_Sydney-Sydney_New_South_Wales.html"><img src="http://www.tripadvisor.com.au/img/cdsi/img2/branding/socialWidget/20x28_green-21692-2.png"/></a>
                </li>
            </ul>
        </div>
        <script src="http://www.jscache.com/wejs?wtype=socialButtonReviews&amp;uniq=926&amp;locationId=256527&amp;color=green&amp;size=rect&amp;lang=en_AU&amp;display_version=2"></script>
    </li>
    <li>
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fgeekdotcom&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=216772831136" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
    </li>
</ul>

http://jsfiddle.net/z2mz4ry9/

Thank you

Answer 1

A simple float did the trick:

li {
    float: left;
}

http://jsfiddle.net/Grimbode/2rrrs31f/

Answer 2

尝试浮动双方的li S： https://jsfiddle.net/rgausnet/2uh34s0j/1/

Answer 3

This might be sloppy, but adding style="position:relative;top:5px;" into id="TA_socialButtonReviews926" seems to do the trick.