HTML锚点标签占据整行。

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;"，但没有帮助。

- Zi Cold

---

你的 CSS 在 <a> 元素上设置了 display: block。你需要消除它或者覆盖它来处理这些标签链接。可以使用 display: inline 或 display: inline-block。 - Zoli Szabó

你可以使用<div style="display:flex;">将锚点标签包装起来</div>，探索利用CSS Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - chri3g91

我为你创建了一个代码片段。正如你所期望的那样，它的行为表现得很好。如果不是这样，我们需要更多关于你的信息，以便找出原因。 - cloned

我认为你已经把期望的与实际得到的颠倒了。你想要把链接放在一起吗？ - Arman Ebrahimi

@ArmanEbrahimi 我想让它显示为行。 - Zi Cold

Answer 1

普通的锚点标签是内联元素。您需要检查您的CSS是否已经将全局的锚点分配给块级元素。a { display: block;}

快速修复方法： 将您代码中的锚点行(Breadcrumbs)放入一个容器中，并指定唯一的id或类名。然后，您可以仅为此行分配内联元素。

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>

- Maik Lowrey

---

这个变体对我有效。我的父元素（body，main）被设置为 display: flex。 - Zi Cold

@ZiCold 感谢您的反馈！:-) ...欢迎您！ - Maik Lowrey

Answer 2

Anchor tags (a) behave like you want by default. What you are getting means that somewhere in your code, there is a display:block, display:flex, or display:grid applied to them. You could overwrite this with a display:inline, like so:

a {
 display:inline;
}

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

- yousoumar

---

display: inline-block; 是更好的选择，因为它允许元素拥有自己的大小，而不仅仅是纯内联（例如 strong 标签或 span 标签）。 - cst1992

我的父元素（main，body）设置为 display: flex;。我尝试将 a 设置为 display: inline;，但它没有起作用。对我来说很奇怪的是，唯一有效的解决方案是使用带有 flex-direction: row; 的 div 包装 a 链接。 - Zi Cold

这些锚点是 main 的直接子元素吗？ - Youssouf Oumar

@yousoumar 是的，它们是。 - Zi Cold

是的，在这种情况下它不会起作用，因为它们是 flex-items。你可以将它们包装在一个 div 中，然后它就可以工作了。 - Youssouf Oumar

Answer 3

<a>元素不应该像你在这里做的那样使用。 <a>是一个内联元素 - 这意味着它随其他元素的“流动”而行动，并且它没有自己的宽度和高度。换句话说，它应该像其他元素的“包装器”一样使用。

所以，不要这样做：

<a>I'm a link</a>

这是一个更好的想法：

<p><a>I'm a link</a></p>

然后在您的样式中，实际上是对<p>标签进行样式设置，而不是<a>标签。

在您的情况下，您有一组链接（看起来像面包屑导航），您希望使用链接来表示。因此，您可以执行以下操作：

<ul class="mybreadcrumb">
  <li class="breadcrumb-item"><a>First</a></li>
  <li class="breadcrumb-item"><a>Second</a></li>
  <li class="breadcrumb-item"><a>Third</a></li>
</ul>

然后在你的CSS中：

ul.mybreadcrumb {
  list-style: none;
}

ul.mybreadcrumb li {
  display: inline-block;
}

ul.mybreadcrumb li+li:before {
  content: ' / ';
}

+ 是兄弟选择器 - 因此它会在第二个及以后的 li 元素前添加一个 /。

- cst1992

Answer 4

如果你想让 a 标签只影响其内容，可以这样做：

a {
    width: fit-content;
}

- neksodebe

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

欢迎来到StackOverflow！您的答案是错误的，您需要查看此处<a>标签的默认行为：W3Schools参考。请注意，<a>标签没有像<p>标签一样的 display: block;属性，这就是使<p>标签不是display: inline的原因。 - Robert Bradley

好的，我错了 @RobertBradley。不过那时候对我来说这个方法有效。每个人的情况都不同。 - neksodebe