图像后的空格显示为链接

给定以下 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 元素之间的空格

似乎您的间距已关闭。下面是两个数字排列的代码，超链接中没有空格。

喜欢感谢您的编辑！在经过同行评审之前，此编辑将仅对您可见。给定以下 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>

相关内容

最新更新

热门标签：