Search code examples
htmltext-align

How to make a hyperlink appear to the right of the page?


I just started development and i am using HTML. I was wondering how to make a hyperlink appear on the right of the page while already having one on the left side. To clarify more I will use the code here.

<nav>
     <p>
        <a href="index.html">Home </a>
        <a href="Contact.html" target="_blank";>Contact</a>
     </p>
</nav>

Here I want that my second hyperlink i.e. Contact appear to the rightmost of the line on my page while Home remaining on the left end. I tried to search online but found nothing, whatever I found I tried but that didn't work.

I tried using align tag in many ways but none gave the desired result.


Solution

  • You can use Flexbox:

    nav ul {
      display: flex;
      justify-content: space-between;
    }
    <nav>
      <ul>  
        <li><a href="index.html">Home</a></li>
        <li><a href="Contact.html" target="_blank">Contact</a></li>
      </ul>
    </nav>

    or Float:

    .left {
        float: left;
    }
    .right {
        float: right;
    }
    <nav>
        <a href="index.html" class="left">Home</a>
        <a href="Contact.html" target="_blank" class="right">Contact</a>
    </nav>