Question

我试图在图像上设置图标和文字，但它在图像旁边放了额外的空间，那么如何从图像中删除多余的空间？

＆＃13;

<xsl:template match="/" xmlns:media="http://search.yahoo.com/mrss/">
    <section>
        <xsl:for-each select="rss/channel/item[position() &lt; 5]">
            <div class="one-quarter left">
                <img class="border" src="{media:thumbnail/@url}" alt="Instagram" />
            </div>
        </xsl:for-each>
    </section>
</xsl:template>

＆＃13;

return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';

＆＃13;

Answer 1

首先：你的img标签不正确。应为<img src="url">

第二：display:inline在元素之间生成空格。所以我建议你改用float:left

例如，如果您想要在一行中使用4个div，请使用float:left;width:25%;，这样您就可以确定divs

之间没有空格

还要确保img涵盖div的所有宽度，在width:100%;height:auto上使用img。 overflow:hidden上的加img无效。您可以在div而不是

上使用它

请参阅以下代码段：

＆＃13;

.fb {
  position: absolute;
  top: 0px;
  right: 5px;
  z-index: 100;
}
.tweeter {
  position: absolute;
  top: 20px;
  right: 5px;
  z-index: 100;
}
img {
 
  width:100%;
  height:auto;
}
div {
  height: 250px;
  width: 250px;
 float:left;
  width:25%;
  position:relative;
  
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
  <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
  <img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
  <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
  <img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
  <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
  <img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
  <a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  <a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>

＆＃13;

在图像上设置图标和文本

1 个答案: