How to shift one element of an <li> list to the right

July 25, 2022

I have an unordered linked list. I’m trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can’t see it anymore or it’s not on the right side of the page. Here is the HTML:

nav {
  position: fixed;
}

.navigation-links-no-style a {
  text-decoration: none;
  position: relative;
  margin: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

.navigation-links li {
  padding-top: 1.3em;
}

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: solid 1px black;
  background: white;
  padding-left: 5em;
}

.navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 20px;
  color: black;
  font-size: 14pt;
}

.order {
  color: #FFFFFF !important;
  background: #1419e2;
  text-decoration: none;
  padding: 8px;
  border-radius: 5px;
  margin-top: 15px;
}

<div class="navbar">
  <a class="glacier-hills" href="glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul class="navigation-links">
    <div class="navigation-links-no-style">
      <li>
        <a class="menu" href="menu.html">Menu</a>
      </li>
      <li>
        <a class="location" href="location.html">Hours and Location</a>
      </li>
    </div>
    <li>
      <a class="order" href="order.html">Order</a>
    </li>
  </ul>
</div>

Any help would be greatly appreciated. Thanks!

>Solution :

Assuming you’re looking to move your .order element, you’ll want to apply the float: right rule to the parent (<li>) element. I’ve added a class to this, .order-container, to make this easier to achieve in the following example.

Note also that once you float to the right, it will be off the screen by default. You’ll want to set a negative margin-right to circumvent this. I’ve gone with margin-right: -10em in the following, to match the offset from the image on the left.

Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.

nav {
  position: fixed;
}

.navigation-links-no-style a {
  text-decoration: none;
  position: relative;
  margin: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

.navigation-links li {
  padding-top: 1.3em;
}

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: solid 1px black;
  background: white;
  padding-left: 5em;
}

.navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 20px;
  color: black;
  font-size: 14pt;
}

.order {
  color: #FFFFFF !important;
  background: #1419e2;
  text-decoration: none;
  padding: 8px;
  border-radius: 5px;
  margin-top: 15px;
  float: right;
}

.order-container {
  float: right;
  margin-right: 10em;
}

<div class="navbar">
  <a class="glacier-hills" href="glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul class="navigation-links">
    <div class="navigation-links-no-style">
      <li>
        <a class="menu" href="menu.html">Menu</a>
      </li>
      <li>
        <a class="location" href="location.html">Hours and Location</a>
      </li>
    </div>
    <li class="order-container">
      <a class="order" href="order.html">Order</a>
    </li>
  </ul>
</div>