Need to adjust signup and login texts same below the button in HTML

user_5013994 0
Viewed 24

I need to adjust signup and login navigation link on extreme right side of the button as shown in texts. Applied spaces using &nbsp html tags but I guess that's not proper way of doing this. Need to get it done the same way. Please help to accomplish this.

enter image description here

#navbar ul li #navbar {
  background-color: rgb(99, 93, 192);
  margin-top: 40px;
  padding: 3px;
  border-right: 2px solid #c4c4c4;
}

#navanchor {
  color: white;
  text-decoration: none;
}

#navbar ul li {
  display: inline-block;
  padding: 3px;
  color: beige;
  font-size: larger;
  padding: 5px;
}
<nav id="navbar">
  <ul>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html"> Home |</a>
    </li>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html">Create a Board |</a>
    </li>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html">Support Forums |</a>
    </li>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html">Board Directory |</a>
    </li>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html">FAQs |</a>
    </li>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html">Contacts</a>

    </li>
    <li>
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
      &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <a id="navanchor" href="http://127.0.0.1:3000/index.html">Sign Up |</a>

    </li>
    <li>
      <a id="navanchor" href="http://127.0.0.1:3000/index.html"> Login </a>
    </li>
  </ul>
</nav>

css html
1 Answers

You needed to use flexbox with CSS nth-child selector click to learn here from ss-tricks.com follow this styles here

*{ box-sizing: border-box; }
#navbar {
  background: blue;
}

#navbar ul li
#navbar
{background-color: rgb(99, 93, 192);
    margin-top: 40px;
    padding: 3px;
     border-right: 2px solid #c4c4c4;

}
#navanchor
{
    color: white;
    text-decoration: none;

}

#navbar ul  {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}
#navbar ul li
{
    display: inline-block;
    padding: 3px;
    color: beige;
    font-size: 14px;
    padding: 5px;
}

#navbar ul li:nth-last-child(2) {
  margin-left: auto;
}
<nav id="navbar">
        <ul>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html"> Home |</a>
            </li>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html">Create a Board |</a>
            </li>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html">Support Forums |</a>
            </li>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html">Board Directory |</a>
            </li>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html">FAQs |</a>
            </li>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html">Contacts</a>

            </li>
            <li>
               <a id="navanchor" href="http://127.0.0.1:3000/index.html">Sign Up |</a>

            </li>
            <li>
                <a id="navanchor" href="http://127.0.0.1:3000/index.html"> Login </a>
            </li>
        </ul>
    </nav>

user_84777920
Related