Html 无法使社交媒体共享按钮在内联列表中对齐

Html 无法使社交媒体共享按钮在内联列表中对齐,html,css,social-media,Html,Css,Social Media,就我的一生而言,我无法让这些社交媒体共享按钮与我的在线列表对齐。我几乎用垂直对齐:top在上,但Chrome不喜欢这样 页面可在此处看到: 完整的HTML/CSS如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

就我的一生而言,我无法让这些社交媒体共享按钮与我的在线列表对齐。我几乎用
垂直对齐:top
  • 上,但Chrome不喜欢这样

    页面可在此处看到:

    完整的HTML/CSS如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .share-links {
                margin: 8px 0 0 0;
                padding-left: 0;
                display: inline;
            }
            .share-links li {
                margin-left: 0;
                padding-right: 15px;
                list-style: none;
                display: inline;
            }
        </style>
    </head>
    <body>
    
    <ul class="share-links">
        <li><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="$fqUrl$post.Url"#if ($macros.IsNotNull($post.ResolvedImageUrl)) data-imageurl="$fqUrl$post.ResolvedImageUrl"#end></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li>
        <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="$fqUrl$post.Url" data-text="$post.Title by $post.User.ProperName" data-count="horizontal" data-via="lifeorganically">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
        <li><iframe src="http://www.facebook.com/plugins/like.php?href=$fqUrl$post.Url&amp;layout=button_count&amp;show_faces=false&amp;width=80;&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:25px;" allowTransparency="true"></iframe></li>
    </ul>
    
    </body>
    </html>
    
    
    .共享链接{
    利润率:8px0;
    左侧填充:0;
    显示:内联;
    }
    .分享链接李{
    左边距:0;
    右侧填充:15px;
    列表样式:无;
    显示:内联;
    }
    

    将Facebook
    iframe
    的高度设置为20px似乎可以达到目的。

    我也在社交分享按钮上使用了最长时间的内联列表,但我发现切换到div的效果更好,即使在所有浏览器上我都没有做到完美,但最后我没有给出一个。。。在我的个人主页上。