How to make 2 links right aligned while keeping the centered links in place in the navigation bar?-CodePudding

I want to keep Home, About and Contact as centered and make "Account" and "Menu" be aligned to the right side without shifting/moving the other 3 to the left which is what's happening now.

I tried using float: right to make it align to the right but this doesn't seem to work properly.

My whole code might be wrong as well so feel free to correct it, thank you.

Thank you for your help in advance.

/* Navbar Customization */

.navbar ul {
  list-style: none;
  background: black;
  text-align: center;
  padding: 0;
  margin: 0;
  justify-content: center;
  display: flex;
}

.navbar li {
  display: inline-block;
}


/* Text Links  */

.navbar a {
  text-decoration: none;
  color: #fff;
  width: 100px;
  display: block;
  padding: 10px;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.4s;
}

.navbar a:hover {
  background: rgb(255, 255, 255);
  transition: 0.6s;
}

.navbar-right {
  float: right;
  justify-content: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="NavigationBar/styles.css">
  <link rel="stylesheet" href="website.css">
  <script src="NavigationBar/script.js" defer></script>

  <title>FoodLore</title>

</head>

<body>



  <div >

    <ul>

      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>

    </ul>

    <div >
      <a href="#">Account</a>
      <a href="#">Menu</a>
    </div>

  </div>

</body>

</html>

CodePudding user response：

So I thought the best way to approach this was to use flexbox and have three child items: navbar-left, navbar-right, navbar-center. That way you can simply set the navbar container to flex-position: space-between. For navbar-left, if you do not want any content, you can just leave it as empty.

It is also important that you set all child items to the same width so that there is equal spacing between all three navbar sections.

You can have a look at the code here: https://codesandbox.io/s/happy-noyce-042i2d?file=/index.html

And preview it here: https://042i2d.csb.app/

CodePudding user response：

Well, I see you have two ways
You can use display: flex on the .nav element with CSS attribute justify-content: space-between
or you can use display: block on the .nav element while using float: right on .navbar-right element.

Here is how to implement the first way:
I have edited your CSS code just a little bit

<style type="text/css">
    *{
      box-sizing: border-box;
    }
    
    body{
      margin: 0px;
    }

    .navbar{
      background: rgba(10, 10, 10, 1);
      padding: 10px;

      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      flex-direction: row;
      align-items: center;
    }

    .navbar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .navbar li {
      display: inline-block;
    }

    .navbar a {
      text-decoration: none;
      color: rgba(255, 255, 255, 1);
      transition: 0.4s;
      font-size: 17px;
      font-family: Arial, Helvetica, sans-serif;

      border-radius: 20px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 5px;
      padding-bottom: 5px;

    }

    .navbar a:hover {
      color: rgba(100, 100, 100, 1);
      background: rgba(255, 255, 255, 1);
    }
  </style>

bonus: you can benefit alot if you use front-end library, example: Bootstrap