内联列表中的项目未对齐

Question

您好，我一直在尝试使社交媒体链接内联。 我要添加Tripadvisor给我的嵌入代码。 页面加载后，tripadvisor链接将在导航栏的底部开始，然后，页面加载完成后，其链接将移动到应有的位置上方约5像素。

我做了一个小提琴来说明正在发生的事情：

<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

一个简单的浮动就可以了：

li {
    float: left;
}

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

Answer 2

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

Answer 3

这可能草率，但要添加style="position:relative;top:5px;" 进入id="TA_socialButtonReviews926"似乎可以解决问题。