无法摆脱链接下划线[重复]答案

【问题标题】：Can't get rid of link underline [duplicate]无法摆脱链接下划线[重复]
【发布时间】：2017-07-09 23:26:48
【问题描述】：

所以我一直试图摆脱这个链接下划线，我似乎无法弄清楚。我放了 text-decoration:none;在我能想到的所有事情上尝试解决这个问题，所以如果有人对如何摆脱这个顽固的下划线有任何想法，那真的很有帮助！谢谢！

#recentwork {
  background-color: #1DA0A3;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
	text-decoration: none;

}

#recent{
	padding:20px;
	text-decoration: none;
	
}
#recentwork img {
  padding: 20px;
  width: 200px;
  height: 200px;
	text-decoration: none;
}

.more{
	text-decoration: none;
	color:black;
}

.more:hover{
	color:white;
}

.titles{
	text-decoration:none;
	
}

.parentdiv{
  display:inline-block;
	text-decoration: none;
	
}

@media only screen and (min-width: 760px) {
  #recentwork img {
    width: 300px;
    height: 300px;
	  text-decoration:none;
  }
}

.underline{
	text-decoration: none;
}

<section id="skills">
<div id="recentwork">
  <h2 id="recent"> Most Recent Work</h2>


 <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<div class="underline">
<h3 class="titles"> Web Design</h3></div>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Photography</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Print</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Logos</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  

</div>
</section>

【问题讨论】：

下划线是a加text-decoration:none引起的
您将文本装饰添加到错误的区域。
哇，我觉得自己真的很愚蠢。我想这只是其中的一天。谢谢@Akshay
始终使用网络调试工具，例如 chome 检查工具，选择您的元素，然后转到“计算”以查看每个值的设置位置
没问题@Cakers :D

标签： html css

【解决方案1】：

您必须将text-decoration 直接添加到a 标签 - 而不是添加到您的a 所在的div。

您可以通过以下方式定位整个部分中的所有 a 标签：

#skills a {
    text-decoration: none;
}

【讨论】：

【解决方案2】：

a{text-decoration:none} 就足够了。

#recentwork {
  background-color: #1DA0A3;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

a {
  text-decoration: none;
}

#recent {
  padding: 20px;
}

#recentwork img {
  padding: 20px;
  width: 200px;
  height: 200px;
}

.more {
  color: black;
}

.more:hover {
  color: white;
}

.parentdiv {
  display: inline-block;
}

@media only screen and (min-width: 760px) {
  #recentwork img {
    width: 300px;
    height: 300px;
  }
}

.underline {}

<section id="skills">
  <div id="recentwork">
    <h2 id="recent"> Most Recent Work</h2>


    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <div class="underline">
          <h3 class="titles"> Web Design</h3>
        </div>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>

    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <h3 class="titles"> Photography</h3>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>


    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <h3 class="titles"> Print</h3>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>

    <div class="parentdiv">
      <a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
        <img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
        <h3 class="titles"> Logos</h3>
      </a>
      <a href="" class="more">
        <h3> See More</h3>
      </a>
    </div>


  </div>
</section>

【讨论】：

【解决方案3】：

使用这个

.parentDiv a { text-decoration: none; }

应该解决问题。

【讨论】：

【解决方案4】：

在a标签中添加无文字装饰

#recentwork {
  background-color: #1DA0A3;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
	text-decoration: none;

}

#recent{
	padding:20px;
	text-decoration: none;
	
}
#recentwork img {
  padding: 20px;
  width: 200px;
  height: 200px;
	text-decoration: none;
}

.more{
	text-decoration: none;
	color:black;
}

.more:hover{
	color:white;
}

/* here is the change */
/* apply text decoration none to anchor tag */
a{
	text-decoration:none;
	
}

.parentdiv{
  display:inline-block;
	text-decoration: none;
	
}

@media only screen and (min-width: 760px) {
  #recentwork img {
    width: 300px;
    height: 300px;
	  text-decoration:none;
  }
}

.underline{
	text-decoration: none;
}

<section id="skills">
<div id="recentwork">
  <h2 id="recent"> Most Recent Work</h2>


 <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<div class="underline">
<h3 class="titles"> Web Design</h3></div>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Photography</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  
  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Print</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

  <div class="parentdiv">
<a href="http://4vector.com/thumb_data/v4l-132979.jpg" data-lightbox="website" data-title="">
<img src="http://4vector.com/thumb_data/v4l-132979.jpg" width="200px" height="200px">
<h3 class="titles"> Logos</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>
  

</div>
</section>

【讨论】：