css - 对齐留在里面?

Question

我正在处理本网站的页脚，我想将 Skype 聊天选项添加到联系人中。这是一个div内的脚本。我试图将它像 ul 中的其他 li 元素一样排列在左侧，但没有运气，请查看此屏幕截图：

http://awesomescreenshot.com/0791c43g8d

小提琴：jsfiddle.net/mCuVq

的HTML：

<h4>Suggestions, offers?</h4>
<ul>
    <li>
        <a href="javascript:void(0)">Send us a mail</a>
    </li>
    <li>
        <a href="javascript:void(0)">Send us a message on Facebook</a>
    </li>
    <li>
        <div class="SkypeButton">
            <script type="text/javascript">
                Skype.ui({
                    "name" : "chat",
                    "element" : "SkypeButton",
                    "participants" : ["xxx"],
                    "imageSize" : 32
                });
            </script>
        </div>
    </li>
</ul>

中 ul 的 CSS：

footer .wrapper .column.midlist ul li {
    display: block;
    width: auto;
    padding: 0 0 0px 0px;
    margin-bottom: 0px;

/*  background: url(img/arrowright2.png) left 6px no-repeat;/*/
    text-align:left;
}


footer .wrapper .column.midlist ul li a:hover {
    color: #e56038;
}

footer .wrapper .column.rightlist ul li {
    display: block;
    width: auto;
    margin-bottom: 15px;

Answer 1

尝试添加以下CSS。检查它是否适合您：

footer .wrapper .column.rightlist ul {
    margin:0;
    padding:0;
}

Answer 2

导致您的问题的代码是由 Skype JavaScript 创建的垂直对齐代码，必须被覆盖。

更改<div class="SkypeButton">为<div id="SkypeButton">并将其添加到您的 css ：

#SkypeButton_paraElement a img { margin:0 !important; 
                                  vertical-align:0 !important }

jsfiddle