无法摆脱链接下划线
问题描述:
所以我一直试图摆脱这个链接下划线,我似乎无法弄清楚。我已经把文字装饰:没有;在一切和任何我能想到的,试图解决这个问题,因此,如果任何人有任何想法,如何摆脱这个倔强的下划线,将真正帮助的!谢谢!无法摆脱链接下划线
#recentwork {
background-color: #1DA0A3;
margin-left: auto;
margin-right: auto;
text-align: center;
\t text-decoration: none;
}
#recent{
\t padding:20px;
\t text-decoration: none;
\t
}
#recentwork img {
padding: 20px;
width: 200px;
height: 200px;
\t text-decoration: none;
}
.more{
\t text-decoration: none;
\t color:black;
}
.more:hover{
\t color:white;
}
.titles{
\t text-decoration:none;
\t
}
.parentdiv{
display:inline-block;
\t text-decoration: none;
\t
}
@media only screen and (min-width: 760px) {
#recentwork img {
width: 300px;
height: 300px;
\t text-decoration:none;
}
}
.underline{
\t 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
标签
#recentwork {
background-color: #1DA0A3;
margin-left: auto;
margin-right: auto;
text-align: center;
\t text-decoration: none;
}
#recent{
\t padding:20px;
\t text-decoration: none;
\t
}
#recentwork img {
padding: 20px;
width: 200px;
height: 200px;
\t text-decoration: none;
}
.more{
\t text-decoration: none;
\t color:black;
}
.more:hover{
\t color:white;
}
/* here is the change */
/* apply text decoration none to anchor tag */
a{
\t text-decoration:none;
\t
}
.parentdiv{
display:inline-block;
\t text-decoration: none;
\t
}
@media only screen and (min-width: 760px) {
#recentwork img {
width: 300px;
height: 300px;
\t text-decoration:none;
}
}
.underline{
\t 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>
答
使用此
.parentDiv a { text-decoration: none; }
应该解决的问题。
答
只是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>
答
你必须直接添加text-decoration
到a
标签 - 而不是一个div
你a
位于
您可以定位自己的整段内的所有a
标签的方式。
#skills a {
text-decoration: none;
}
下划线引起b:如下所示y中的'了''加文字装饰:none'它 – Akshay
要添加的文字修饰到错误的区域。 –
哇我觉得真的很愚蠢..我想这只是其中的一个日子..谢谢@Akshay – Cakers