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 =＆＃34; SkypeButton_Call_italy-amo_1＆＃34;）。。

我尝试用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如果我做错了什么..

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>

向下并在关闭</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 button

2 个答案: