Question

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

我做了一个js小提琴来说明发生了什么：

<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"似乎可以解决问题。

内联列表中的项目不对齐

3 个答案: