This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Kate
almost 9 years

Why do my links always show up in a horizontal line?

Whenever I write multiple links, they show up in the results window all in one line.

Ex: This code (on two separate lines)

<a href="http://amazon.com">Amazon</a>
<a href="http://codecademy.com">Codecademy</a>

Shows up like this: Amazon Codecademy

Instead of: Amazon Codecademy

I solved this by using div tags, but then once you had to change only the first-child, it obviously got messed up. Because they were then all a first child. Probably a dumb question… but how do I make my links show up underneath one another? Do I need to use some sort of list tag?

Answer 5557653376b8fea59d00066b

0 votes

Permalink

It would help to understand the underline principal in order to solve this problem easily. html knows two elements: inline elements and block elements. some examples of inline-elements:

<a></a>
<span></span>
<img>

some example of block elements:

<p></p>
<div></div>

and many more, i found lists. for all inline elements click here for all block level elements click here

now, i am guessing you figured out by know, that inline elements stay on a horizontal line (like with your links) and block level elements will do a vertical line (like div)

so wrapping the links in divs will put each link on a new line. Now, what i am going to tell you now might not pass the exercise, this is just information. There are multiply things you can do. if you wrap your links in div’s you could change the css selector to:

div:nth-child(x) a {/* some css code */}

(x should be a number, i just use x to indicate it as any possible number)

another possible solution would be to let the links behave as blocks by adding this to css:

a { display: block; }

not sure if you had this in the exercise, for all possible display values check here

another possible solution would be to use a html element called breaks (<br>):

<a href="#'>click me</a><br>
<a href="#'>click me</a><br>
<a href="#'>click me</a><br>

which is pretty straight forward. but it does represent a problem. a:nth-child checks if the x’th element is a link, (which in my opinion isn’t covered properly in the lessons). so a:first-child would be fine. but a:nth-child(2) won’t work since the second element is a <br>. so now you need 1,3,5 to select the links. another possible solution would be to use nth-of-type, which only counts the link elements (so you can use 1,2,3 again)

right, if you have any questions about all this (which i think it is quite a lot) feel free to ask, i will do my best to answer

points
Submitted by stetim94
almost 9 years

Answer 55576f379113cbf96400003e

0 votes

Permalink

Thanks for the detailed response!

I was able to pass the exercise fine on my own, but I was more just personally curious why they were showing up in one line when they were coded on separate lines. The lessons eventually explained block vs. inline and display settings in a later exercise, so between that and your explanation, I think I’m good!

I’ll be sure to let you know if I get tripped up on a similar situation.

points
Submitted by Kate
almost 9 years

1 comments

stetim94 almost 9 years

yes, it seems like you where able to pass the exercise. Good to not take everything for granted, and question what you are actually doing. Sure, let me know, or if you have any questions about my explanation.