float the elements to the right in correct order css

Navigation
4

I have four elements of a menu the first on the left the other three on the right, but when floating ul li float:right; the elements are positioned in a disorderly manner. 

[Menu3] [Menu2] [Menu1]

But the elements should be displayed in this order: 

[Menu1] [Menu2] [Menu3]

The complete code in execution: link

How do I show the elements in order, but in the same menu design? 

.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>
    
asked by Otto 24.08.2016 в 15:54
source

2 answers

2

The Shaz solution seems perfect but if for some reason you need compatibility with browsers that do not support flexbox you can also use display:inline-block and align 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>
    
answered by 24.08.2016 / 20:37
source
4

One option is to do it with flexbox, justifying the elements at the end of the row and allowing the first of these "grow" to occupy 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>
    
answered by 24.08.2016 в 16:05
How can I return the value of a method that is within another method Count times an item is repeated in a php fix