How do I put multiple links on the same line? (HTML5)

Question

I'm trying to put multiple links on the same line so I can have a whole bar of links, I've tried this:

<a href="website_homepage.htm"><h2 style="font-family:tempus sans itc;">Home</h2></a> <a     href="website_hills.htm"><h2 style="font-family:tempus sans itc;">Hills Pupil Tailored Website</h2></a>

but when I test to see if it works, these two links are on seperate lines, does anyone know how I can get them on the same line?

Answer 1

Simply add:

h2{
    display: inline;
}

To your CSS and the problem will be solved.

Answer 2

That's because of h2 display property which is block.

Try with:

h2 {
    display: inline-block;
}

or

h2 {
    display: inline;
}

at the beginning of your file (enclosed by <style> tags) or in your stylesheet file.

See Typical default display properties here

Answer 3

Alternatively replace "h2" with for example "span" and the links will be on the same line.

or you could put:

<h2 style="font-family:tempus sans itc;"><a href="website_homepage.htm">Home</a> <a href="website_hills.htm">Hills Pupil Tailored Website</a></h2>

Putting all the links within one h2 tag instead of using one for each link.