图像显示为链接后的空白

沃尔夫冈·罗斯

鉴于以下 HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
  <body>
    <div style="background-color:red">
      <a href="1__mose_info.htm">
        <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
    </div>
    <div style="background-color:green">
      <a href="1__mose_info.htm">
        <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" />
      </a>
      <a href="1__mose.htm">
        1. Mose
      </a>
    </div>
  </body>
</html>

第一个分区显示为我想要的（'1' 之前没有链接下划线。但是如果我像在第二个 div 中那样格式化我的代码，则 1 之前的空间会为链接添加下划线。

仔细一看，“1”前空格的链接是图片的链接，不是文字的链接。有没有更简单的方法可以不将此空间作为链接的一部分？

[在我两次投票后编辑并选择首选答案：]

因此，最佳做法是将所有 html 元素和/或文本保留在一行中，至少是第一个单词。在编辑后续的 html 源代码时，我会尽量记住这一点

谢谢你们。沃尔夫冈

网易

换行符在 HTML 中算作一个空格。您需要将其更改为此以保持相同的格式：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div style="background-color:red">
        <a href="1__mose_info.htm"><img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
    </div>
    <div style="background-color:green">
        <a href="1__mose_info.htm">
            <img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
    </div>
</body>
</html>

如果您热衷于不影响页面显示的 html 格式，请在此处查看有关如何克服此问题的更多信息：使用换行符时删除 HTML 元素之间的空格

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。