How to separate items in an HTML list to make it like three elements are on one side and two on the other side in a horizontal navigation

Admin 1
Viewed 2045

I have already put a div tag along the place where I want to split the list items. However, when I do float left or right, it doesn't work. I want to create a navigation bar where the user can browse the website on the left and manage their account on the right. Can anyone help me?

This Is The HTML and CSS Code:

        ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #0f0f0f;
      border-radius: 50px;
    }
    
    li {
      float: left;
      background-color: #0f0f0f;
    }
    
    li a {
      display: block;
      color: #8ca2ff;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    font-size: 20px;
    }
    
    li a:hover {
      background-color: #111;
    }
    <div class="header">
      <ul>
        <div class="first">
          <li><a href="">Home</a></li>
          <li><a href="">Updates</a></li>
          <li><a href="">Blog</a></li>
        </div>
        <div class="last">
          <li><a href="">Sign In</a></li>
          <li><a href="">Login</a></li>
        </div>
      </ul>
    </div>

How The Navigation Bar Looks Now

navbar web hyperlink css html
2 Answers

 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0f0f0f;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
}

.last,
.first {
  display: flex;
}

li {
  background-color: #0f0f0f;
}

li a {
  display: block;
  color: #8ca2ff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

li a:hover {
  background-color: #111;
}
<div class="header">
  <ul>
    <div class="first">
      <li><a href="">Home</a></li>
      <li><a href="">Updates</a></li>
      <li><a href="">Blog</a></li>
    </div>
    <div class="last">
      <li><a href="">Sign In</a></li>
      <li><a href="">Login</a></li>
    </div>
  </ul>
</div>

user_113515800

Can you please check the below code? Hope it will work for you.

As per Html standards, we can not use div directly inside ul(unordered list) so we added 2 ul inside .navigation div. With the help of flex properties, display:flex; and justify-content:space-between; we have separated items in .navigation as per your requirement.

Please refer to this link: https://jsfiddle.net/yudizsolutions/764rdezq/1/

.navigation {
  background-color: #0f0f0f;
  border-radius: 50px; 
  overflow: hidden; 
  display:flex; 
  display: -webkit-flex;
  justify-content:space-between;
  -webkit-justify-content:space-between;
}

ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
  display:flex; 
  display: -webkit-flex;
 }

li {
  
  background-color: #0f0f0f;
}

li a {
  display: block;
  color: #8ca2ff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

li a:hover {
  background-color: #111;
}
<div class="header">
  <div class="navigation">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Updates</a></li>
      <li><a href="">Blog</a></li>
     </ul>
    <ul>
      <li><a href="">Sign In</a></li>
      <li><a href="">Login</a></li>
    </ul>
  </div>
</div>

user_122138960
Related