javascript - 内联列表中的元素未对齐

Question

您好，我一直在尝试让社交媒体链接在线工作。我正在添加 tripadvisor 给我的嵌入代码。当页面加载时，tripadvisor 链接将从导航栏的底部开始，然后在页面加载后，它会移动到它应该在的位置上方约 5 像素处。

我制作了一个 js fiddle 来说明正在发生的事情:

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

谢谢

Answer 1

一个简单的 float 就可以了:

li {
    float: left;
}

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