Question

我不希望图片有下划线，但我需要在文本中加下划线加下划线。我怎样才能做到这一点？这是一个wordpress主题，所以我不能改变我必须留在CSS的HTML

.post-desc a{
    border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
    border-bottom: none;
}

<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
  </div>

Answer 1

您可以使用图片上的display:table;将其删除，如下所示：

.post-desc a img{
    border-bottom: none;
    display:table;
}

段：

.post-desc a {
  border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
  border-bottom: none;
  display: table;
}

<div class="post-desc">
  <a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
    <img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
  </a>
</div>

Answer 2

为了简单起见，您可以使用带有负值的LeaveOneLabelOut在基线下尽可能多地删除vertical-align：

＆＃13;

img

＆＃13;

a {
  border-bottom: solid;
}
a img {
  vertical-align: -0.5em;/* average -0.25em equals vertical-align:bottom */
 /* demo purpose: see border under img */
 opacity:0.75;
}

＆＃13;

在您网站的最后一个样式表中，测试一下

<a href="#">text</a>
<a href="#">
  <img src="http://dummyimage.com/60" />
</a>

或者如果你更喜欢：

a img {
  margin-top:0.5em;
  vertical-align:  -0.5em;
}

我们的想法是隐藏图像本身的边框

Answer 3

文字装饰下划线

<div><a style="text-decoration:underline" href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>

Answer 4

您已在<a>标记上设置了边框属性，因此您不能仅在包含<img>元素上删除它们。不幸的是，没有"conatining" selector in css（还），显然你无法编辑html，所以我们必须坚持使用我们得到的信息。

包含图片的链接在属性attachment中包含rel字样。这是如何选择它们并禁用它们的边框：

a[rel~="attachment"] {
    border-bottom: none !important;
}

定位锚元素中的文本而不是图像

4 个答案: