Anchor tags randomly different widths

1

Hi,

I am techincally just completed the Build a Wikipedia Viewer task, however there is one thing I can’t seem to fix, the anchor tags on my search results are sometimes randomly longer than the other ones, so the come out aligned wrongly, despite them all been written from the same code using a for loop.

Here is my codepen: https://codepen.io/Dakinola892/pen/MoOXbY

I built the search results using a forloop and jquery to populate the inner html of a div container. They are supposed to build the container, fill in an anchor tag with the page title and a text description from the api, and everything is suppposed to be centered using the flexbox properties ‘justify-content-center’ and ‘align-content-center’. However, for some reason the anchor tag on some results turns out longer than it needs to be, so it comes out misaligned. Try searching 'Batman, the first anchor tag is randomly extra long, so isn’t centered. Or try ‘Albert’ the first 3 anchor tags are all misaligned for being too long.

I have no idea how this happened. All search results are literally built by the same code yet some how come out differently. Any insight into my problem would be appreciated. Thanks :slight_smile:

2

If you remove width from your a tag, it will center properly.

a {
    display: block;
    /* width: 100%; */
3

That works, thanks

But do you why having 100% width made random anchor tags have extra long widths? Could you explain it to me?

4

a tags (or span tags) are what you call inline elements and normally one doesn’t put width parameters on such things… (unless the a or span tag is also declared as display:block).