Question

给出以下HTML：

＆＃13;

<!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>

＆＃13;

第一个分区显示为我想要的（在＆＃39; 1＆＃39;之前没有链接下划线。但是如果我在第二个div中格式化我的代码，则1之前的空格获得链接的下划线

如果你仔细观察一下，之前的空间链接是＆＃39; 1＆＃39;是图像的链接，而不是文本的链接。是否有更简单的方法可以将此空间作为链接的一部分？

[在我的两个upvotes之后编辑并选择首选答案：]

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

谢谢大家。沃尔夫冈

Answer 1

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

＆＃13;

<!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>

＆＃13;

如果您热衷于不影响页面显示的HTML格式，请查看此处了解如何解决此问题：Removing whitespace between HTML elements when using line breaks

Answer 2

你的间距似乎已经消失了。这里有两个数字排列的代码，没有超链接中的空格。

喜爱谢谢你的编辑！在进行同行评审之前，此编辑仅对您可见。给出以下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>

图像显示为链接

2 个答案: