HTML anchor tag takes entire line

Question

I have the following html markup:

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

I want it to display as:

First Link / Second Link / Third Link

But what I get is:

First Link
/
Second Link
/
Third Link

And links can be clickable in any place of their row. How can I fix it? I tried "display: block;", but it didn't help.

Answer 1

Regular anchor Tags are inline elements. You have to check if in your CSS, you already assign anchors globally to a block element. a { display: block;}

For fast fix: Wrap your code anchor line (Breadcrumbs) in a container and assign with a unique id or class Name. Then you can assign only for this line the anchors to a inline element.

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>