两个图像链接之间的下划线

Question

我在div中有以下HTML代码:

<a href="http://www.mysql.com">
<img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a href="http://www.php.net"> 
<img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

这导致以下输出带下划线!？它们之间:

如果我只使用一个图像链接,则下划线消失.

为什么会这样,我怎么能摆脱下划线？

Answer 1

下划线是一个或多个带下划线的空格字符.修复方法是删除任何可能被视为a元素内部空间的内容,例如换行符.换行符和其他空格标签(在<和之间>)是可以的,但是:

<a href="http://www.mysql.com"><img src="images/php-power-micro2.png" 
  alt="PHP powered" border="0" title="PHP" /></a>
<a href="http://www.php.net"><img src="images/mysql-power.jpg"
  alt="MySQL powered" border="0" title="MySQL"/ ></a>

这意味着a元素之间仍然存在换行符,浏览器通常将其视为空格.在这种情况下,这可能无关紧要,因为空间是外部a元素,因此不会加下划线; 它只会造成一点间距.但是为了使图像更清晰地分开,可以考虑添加padding-left第二个a元素.

Answer 2

"下划线"实际上是'a'标签的下划线.这是浏览器应用的一种表示超链接的样式.要删除下划线但保留超链接,请设置'a'标记的样式.

a{text-decoration:none;}

你也可能在页面上有其他链接,所以最好给这些链接一个类,这样它们可以单独设置样式.

<a class="imageLink" href="http://www.mysql.com">
  <img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a class="imageLink" href="http://www.php.net"> 
  <img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

然后做这样的事情:

a.imageLink{
    text-decoration:none;
}

或者,您可以使用内联样式:

<a style="text-decoration:none;" class="imageLink" href="http://www.mysql.com">

抱歉,如果你已经知道这一点并且看起来很明显,我只是想给出一个明确的答案.:)