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

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 >
  <a  href="glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul >
    <div >
      <li>
        <a  href="menu.html">Menu</a>
      </li>
      <li>
        <a  href="location.html">Hours and Location</a>
      </li>
    </div>
    <li>
      <a  href="order.html">Order</a>
    </li>
  </ul>
</div>

Any help would be greatly appreciated. Thanks!

CodePudding user response：

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 >
  <a  href="glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul >
    <div >
      <li>
        <a  href="menu.html">Menu</a>
      </li>
      <li>
        <a  href="location.html">Hours and Location</a>
      </li>
    </div>
    <li >
      <a  href="order.html">Order</a>
    </li>
  </ul>
</div>

CodePudding user response：

MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex

/*Normalise body*/
body {
  margin:0;
}

/*Set flex on the nabar top position logo and links*/
.navbar {
  display: flex;
}

/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
  margin-left: 5em;
}

nav {
  position: fixed;
}

.navigation-links-no-style a {
  text-decoration: none;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  /*Ad flex to the nav link element*/
  display: flex;
  /*Vertically center the links*/
  align-items:center;
}

/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
  margin-left: auto;
  margin-right:1em;
}

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

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

.navbar a {
  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 >
  <a  href="glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul >
    <li>
      <a  href="menu.html">Menu</a>
    </li>
    <li>
      <a  href="location.html">Hours and Location</a>
    </li>
    <li>
      <a  href="order.html">Order</a>
    </li>
  </ul>
</div>