HTML anchor tag takes entire line-CodePudding

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 the their row. How can I fix it? I tried "display: block;", but it didn't help.

CodePudding user response：

HTML 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 on a elements. 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>

CodePudding user response：

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 >
<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>
</div>

CodePudding user response：

The <a> element is not supposed to be used like you are doing here. <a> is an inline element - which means that it goes with the "flow" of other elements and it does not have a width and height of its own. In other words, it's supposed to be used like a "wrapper" around other elements.

So instead of this:

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

This is a better idea:

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

and then in your styling, you actually style the <p> tag and not the <a>.

In your case, you have a group of links(a breadcrumb, by the looks of it) which you want to represent using links. So you could do something like this:

<ul >
  <li ><a>First</a></li>
  <li ><a>Second</a></li>
  <li ><a>Third</a></li>
</ul>

And then in your CSS:

ul.mybreadcrumb {
  list-style: none;
}

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

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

That is a sibling selector - so it'll add a / before the second and onward li element.