如何防止命名锚点引入换行符

Question

在以下代码片段中：

<a name="top"></a>
<div class="topbar">
  <img src="banner.jpg" alt="The Group Company" width="100%" />
  <div class="printOnly">
    <center><b>Printed from www.company.com</b></center>
  </div>
</div>

命名锚点 (<a name="top"></a>) 在 topbar div 之前引入了一个换行符。有没有办法防止这种情况？出于各种原因，命名锚必须位于包含横幅图像的 div 上方。

我尝试使用CSS将锚点的高度设置为0px和显示到 none，但这使他无法使用锚点（即从其他地方链接到 #top页面不再有效）。

有解决办法吗？

Answer 1

实际上，使用锚点 link 到页面上的某个部分是 obsolete. You can use the global id attribute。这也解决了您的问题，因为您不必添加额外的 dom 元素：

<div class="topbar" id="top">...</div>

其他地方：

<a href="#top">Go to top</a>

很简单！

Answer 2

使 div <div class="topbar"> 内联，

.topbar{
  display:inline-block;
  }

<a name="top"></a>
<div class="topbar">
  <img src="banner.jpg" alt="The Group Company" width="100%" />
  <div class="printOnly">
    <center><b>Printed from www.company.com</b></center>
  </div>
</div>

如何防止命名锚点引入换行符

How to prevent named anchor from introducing a line break

html

css

anchor