HTML anchor 标记占用整行

Question

我有以下 html 标记:

<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>

我希望它显示为:

First Link / Second Link / Third Link

但我得到的是:

First Link
/
Second Link
/
Third Link

链接可以在其所在行的任何位置点击。我该如何解决？我试过“display: block;”，但没有用。

Answer 1

常规 anchor 标记是内联元素。您必须检查您的 CSS 中是否已经将 anchor 全局分配给 block 元素。 a { display: block;}

对于快速修复:将您的代码 anchor 线 (Breadcrumbs) 包装在一个容器中，并分配一个唯一的 id 或类名。然后你可以只为这条线分配 anchor 到一个内联元素。

a {
 display: block;
}
.anchor-regular a {
  display: inline;
}

<a href="">test block </a> <a href="">test block</a>
<div class="anchor-regular">
<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>
</div>