Question

我正试图在我的网站上删除这些（图标下面的蓝线）（我用HTML和CSS编码）我尝试了很多不同的东西，比如text-decoration：none; border：none;（用于图像）似乎无法找到如何解决这个问题

这就是我的HTML：

.socialmediawidgets{
     text-align: left;
}

<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>

Answer 1

这些行来自链接。 CSS中的3行可以解决问题：

＆＃13;

.socialmediawidgets{
     text-align: left;
}

a {
    text-decoration: none;
}

＆＃13;

<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>

＆＃13;

Answer 2

将范围与代码隔离，可以将text-decoration：none添加到.a。如果您正在扩展代码并希望将下划线移除到您现在应该使用的区域：

.socialmediawidgets a {
text-deoration: none;
 }

请参阅显示代码和CSS更改的附件代码段：

＆＃13;

.socialmediawidgets{
   text-align: left;
 }
 
 a {
 text-decoration: none;
 }

＆＃13;

<div>
    <div class="socialmediawidgets">
 <a href="[full link to your Twitter]">
 <img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Pinterest]">
 <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Facebook page]">
 <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your LinkedIn]">
 <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
 </a>
 
 <a href="[full link to your Instagram]">
 <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" 

width="35" height="35" />
 </a>
 
</div>
</div>

＆＃13;

Answer 3

您应该在CSS上添加text-decoration:none。查看the Docs

注意我已经创建了一个CSS selector“.socialmediawidgets a”

这样，受影响的链接只是.socialmediawidgets div

下的链接

.socialmediawidgets{
     text-align: left;
}

   .socialmediawidgets a {
    text-decoration:none;
  }

<div>
    <div class="socialmediawidgets">
    <a href="[full link to your Twitter]">
    <img title="Twitter" alt="Twitter"  src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
    </a>
    <a href="[full link to your Pinterest]">
    <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
     </a>
     <a href="[full link to your Facebook page]">
     <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
     </a>
     <a href="[full link to your LinkedIn]">
     <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
     </a>
     <a href="[full link to your Instagram]">
     <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
     </a>
     </div>
</div>`

试图摆脱我的图像下面恼人的小蓝色链接

3 个答案: