CODEWITHSUNDEEP
html
DrSkittles
DrSkittles

Reputation: 53

How to make hyperlinks line up right next to eachother with HTML

So, when I make hyperlinks by default it starts a new line. I have tried the li tag, I have also tried the div tag. Here is my code

<a href="index.html" style="text-decoration : none; color : #00FFFF;"><h1>Home</h1></a>
<a href="staff.html" style="text-decoration : none; color : #00FFFF;"><h1>Staff</h1></a>

Upvotes: 5

Views: 31390

Answers (2)

consuela
consuela

Reputation: 1703

Give your links a display of "inline-block" and they will appear next to each other. You can then add some padding or margin to give them some space.

You can achieve the same result by using the li tag and giving them the display:inline-block style.

<ul>
    <li style="display:inline-block;">
        <a href="index.html" style="text-decoration:none; color:#00FFFF;"><h1>Home</h1></a>
    </li>
    <li style="display:inline-block;">
        <a href="staff.html" style="text-decoration:none; color:#00FFFF;"><h1>Staff</h1></a>
    </li>
</ul>

By the way, you should not be using two or more "h1" headings in the same page and you should avoid using inline styles. Keep them in an external CSS file.

Here's your original code using the display:inline-block style and with some spacing:

<a href="index.html" style="display:inline-block; text-decoration:none; color:#00FFFF; margin-right:20px;"><h1>Home</h1></a>
<a href="staff.html" style="display:inline-block; text-decoration:none; color:#00FFFF;"><h1>Staff</h1></a>

Upvotes: 5

Goodword
Goodword

Reputation: 1645

According to this baller resource, the <span> tag is used to group inline-elements in a document: http://www.w3schools.com/tags/tag_span.asp

<span>
<a href="index.html" style="text-decoration : none; color : #00FFFF;">
<h1>Home</h1>
</a>
<a href="staff.html" style="text-decoration : none; color : #00FFFF;">
<h1>Staff</h1>
</a>
</span>

Upvotes: 3

Related Questions