html - Tripadvisor 插件在我的代码中造成困惑，我无法对其进行编辑

Question

在网站的页脚中，我想包含社交小部件。 Facebook 一个工作得很好，Tripadvisor 有很多行代码，而且没有真正的风格，跳出我的页脚等。

我最终如何为未设置样式的小部件设置样式？如果我更改代码中的任何内容，则会显示一条消息:

"Please check the TripAdvisor code and install again."

这是他们的代码

<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
    <ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
        <a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393-  Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
            <img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
        </a>
        </li>
    </ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&amp;uniq=675&amp;locationId=6883393&amp;color=green&amp;size=rect&amp;lang=en_US&amp;langversion=2"></script>

主要问题是它跳出了页脚并且没有像我希望的那样保持在一行中。

截图:

要检查的整个站点是:http://ilovesegway.com

Answer 1

要完全按照您的意愿获得它，最好的方法是在您选择的浏览器中打开您的网站，然后在浏览器开发人员工具中修改样式。

我进去稍微修改了父div。我给了它 display: inline-block

<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...

这还不够，所以我还更改了两个子 div 来继承 vertical-align样式。

<div class="socialWidgetContainer"风格为 display: table-cell我删除了。

<div class="socialWidget" style="vertical-align: inherit;"

我假设第二个修改是由 trip advisor 生成的内容，但您仍然可以通过 .css 对其进行样式设置。文件甚至一些 JavaScript .

我通过 chrome 开发工具完成了所有这些工作。