给定以下 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 元素和/或计入 anchor 元素的文本保留在一行中 - 至少是第一个单词。 在编辑后续的 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 格式，请查看此处了解如何克服此问题:Removing whitespace between HTML elements when using line breaks
关于javascript - 图像显示为链接后的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43962166/