CODEWITHSUNDEEP
htmlhyperlink
Matthew W.
Matthew W.

Reputation: 409

How do I put multiple links on the same line?

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?

Upvotes: 6

Views: 109093

Answers (4)

Christos Markakis
Christos Markakis

Reputation: 1

I found a way to do this in just HTML, if that's what you're looking for. If you re-write your code to look like this:

<a href="website_homepage.htm">Home</a>
<a href="website_hills.htm">Hills Pupil Tailored Website</a>

Then your links will show side by side.

Full transparency, I'm just starting out on my developer journey. I'm currently taking a full stack developer course and I'm just on the HTML section of the course (I haven't hit the css or javascript portion of it yet). So there may be a better way to do it using CSS or other tricks that I haven't learned yet.

I'm assuming I'll eventually learn how to format this through CSS but I figured I'd add what I know in case it's what you're looking for.

Upvotes: 0

Joshua
Joshua

Reputation: 946

Simply add:

h2{
    display: inline;
}

To your CSS and the problem will be solved.

Upvotes: 15

user2757572
user2757572

Reputation: 463

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.

Upvotes: 2

Jerska
Jerska

Reputation: 12002

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

Upvotes: 6

Related Questions