Question

所以我一直试图摆脱这个链接下划线，我似乎无法弄明白。我把文字装饰：无;关于我能想到的一切和任何事情都可以尝试解决这个问题，所以如果有人对如何摆脱这种顽固的下划线有任何想法，那将会有所帮助！谢谢！

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将文字装饰无添加到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>

Answer 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>

Answer 3

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

您可以按以下方式定位整个部分内的所有a代码：

#skills a {
    text-decoration: none;
}

Answer 4

使用此

.parentDiv a { text-decoration: none; }

应该解决问题。

无法删除链接下划线

4 个答案: