css - 在 <li> 中将 <div> 向左对齐？

Question

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

http://awesomescreenshot.com/0791c43g8d

fiddle :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

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

更改 <div class="SkypeButton">至 <div id="SkypeButton">并将其添加到您的 css 中:

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

jsfiddle