css uri skype 按钮

Question

我需要将 skype 按钮图像放在他的 div 中，但我无法做到这一点..我唯一能做的就是将父 div 对齐到另一个div 但 skype 按钮图像在 div 之外.. 这里是 skype 代码：

<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_italy-amo_1" style="border: solid black 1px; float: left; width: 100px; height: 32px;">
  <script type="text/javascript">
    Skype.ui({
      "name": "call",
      "element": "SkypeButton_Call_italy-amo_1",
      "participants": ["italy-amo"],
      "imageSize": 32
    });
  </script>
</div>

如您所见，我使用内联 css 将父 div 浮动到另一个 div 附近，这没关系，但图像在父 div 之外（ id="SkypeButton_Call_italy-amo_1")..

我试过 css 但没有...我不知道为什么..

Answer 1

如果你真的想使用这个 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>
 <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
  <title>test</title>
    <style>
        .skyype{border: solid black 1px; float: left; width: 100px; height: 32px; display:flex;}
        #SkypeButton_Call_italy-amo_1_paraElement {margin:0px !important;padding:0px !important;}
        .skyype img {margin:0px !important; vertical-align:0px !important;}
    </style>
</head>
<body>
    <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
    <div id="SkypeButton_Call_italy-amo_1" class="skyype"> 
    </div>
</body>
</html>
<script type="text/javascript">
    Skype.ui({
      "name": "call",
      "element": "SkypeButton_Call_italy-amo_1",
      "participants": ["italy-amo"],
      "imageSize": 32
    });
  </script>

但请回头阅读..根据您的代码，它很快就会出现，但我建议您使用简单的 html structure.sorry 如果我做错了什么..ty

Answer 2

因此，要使代码性能更好，您可以做的第一件事就是移动脚本部分 -

<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
<script type="text/javascript">
    Skype.ui({
      "name": "call",
      "element": "SkypeButton_Call_italy-amo_1",
      "participants": ["italy-amo"],
      "imageSize": 32
    });
  </script>

down 并在关闭 </body> 标签前插入它。确保两个脚本的顺序都是正确的。
那么您的标记将只是：

<div id="SkypeButton_Call_italy-amo_1" style="border: solid black 1px; float:left; height:32px;">
</div>

因此您可以应用以下 css 来调整它：

#SkypeButton_Call_italy-amo_1_paraElement {
    margin:0;
}
#SkypeButton_Call_italy-amo_1_paraElement img {
    margin:0 !important;
    vertical-align:middle !important;
}

Here is a JSfiddle 显示 - 将来使用它来创建您的问题的工作示例。

编辑：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
        <style>
            #SkypeButton_Call_italy-amo_1_paraElement {
                margin:0;
            }
            #SkypeButton_Call_italy-amo_1_paraElement img {
                margin:0 !important;
                vertical-align:middle !important;
            }
        </style>
    </head>
    <body>
        <div id="SkypeButton_Call_italy-amo_1" style="border: solid black 1px; float: left; width: 100px; height: 32px;"></div>
        <script type="text/javascript">
            Skype.ui({
              "name": "call",
              "element": "SkypeButton_Call_italy-amo_1",
              "participants": ["italy-amo"],
              "imageSize": 32
            });
        </script>
    </body>
</html>

css uri skype 按钮

css uri skype button

css

skype