将图像包装在标签中，但只在文本上加下划线

My screenshot http://dl.getdropbox.com/u/240752/stars.gif

我的截图http://dl.getdropbox.com/u/240752/stars.gif

I want to have it so that only the text is underlined. The only way I can see of doing this is this:

我希望它只有文字加下划线。我能看到这样做的唯一方法是:

.no-underline {
   text-decoration:none;
}
.underline {
  text-decoration:underline;
}

<a href="#" class="no-underline"><span class="underline">Average customer review rating</span><img src="img/five-stars.gif" alt="five stars" width="78" height="16" title="5 star review rating" /></a>

Is this the best way? or does someone know a leaner way? Thanks.

这是最好的方法吗?或者有人知道更精简的方式吗?谢谢。

3 个解决方案

#1

No other solution really. Though you can shorten it a little:

没有其他解决方案。虽然你可以缩短一点:

<a href="#" class="imgLink"><span>Link Text</span> <img src="..."></a>

a.imgLink { text-decoration: none; }
a.imgLink span { text-decoration: underline; }

That way you only need to specify one class.

这样你只需要指定一个类。

#2

In which browser do you have a problem with this? Most browsers do not apply text-decoration to images since it makes no sence.

你在哪个浏览器中遇到问题?大多数浏览器不会对图像应用文本修饰,因为它没有任何意义。

othersize, just do like this:

其他人,只需这样做:

<a class="imgLink" href="">some text<img src="" /></a>

某些文字将图像包装在标签中，但只在文本上加下划线


.imgLink {
    text-decoration: underline;
}

.imgLink img {
    text-decoration: none;
}

#3

If you want to add non-underlined image badges for reusable link types, such as displaying a wikipedia-style external link arrow, try the following style:

如果要为可重用链接类型添加非下划线图像标记,例如显示*样式的外部链接箭头,请尝试以下样式:

a.externalLink{
    padding-right: 15px;
    background: transparent url('badge.png') no-repeat center right;
}

Then in your markup:

然后在你的标记中:

<a href="foo" class="externalLink">bar</a>

#1