Home / Questions / 21529
Accepted
Otto
Asked: 2020-08-25 05:54:54 +0800 CST 2020-08-25 05:54:54 +0800 CST

float elements to the right in correct order css

  • 772

I have four elements of a menu, the first one on the left and the other three on the right, but when floating ul li float:right;the elements are positioned out of order.

[Menu3] [Menu2] [Menu1]

But the elements should be displayed in this order:

[Menu1] [Menu2] [Menu3]

The full running code: https://jsfiddle.net/u1eu2dku/

How do I display the items in order, but in the same menu layout?

.menu {
  width: 100%;
  float: left;
}

.menu ul li {
  float: right;
  list-style-type: none;
  text-align: left;
}

.menu ul li a {
  padding: 10px;
}
   <div class="menu">
  <ul>
    <li style="float:left;">logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

html

2 Answers

  1. One option is to do it with flexbox, justifying the elements at the end of the row and allowing the first of these to "grow" so that it occupies the rest of the space on the left:

    .menu {
  width: 100%;
}

.menu ul {
  justify-content: flex-end;
  display: flex;
}

.menu ul li {
  list-style-type: none;
  text-align: left;
}

.menu ul li:first-child {
  flex: 1;
}


.menu ul li a {
  padding: 10px;
}
    <div class="menu">
  <ul>
    <li>logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

    • 6
  2. Best Answer

    Shaz's solution seems perfect to me but if for some reason you need compatibility with browsers that don't support flexbox you can also use display:inline-blockand align to the right with text-align:

    .menu {
  width: 100%;
  float: left;
  text-align:right;
}

.menu ul li {
  display:inline-block;
  list-style-type: none;
  text-align: left;
}

.menu ul li a {
  padding: 10px;
}
    <div class="menu">
  <ul>
    <li style="float:left;">logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

    • 2