'Have a navigation bar on right in order [closed]

I've an issue with the order in a navigation bar to recreate the Google page with a proper order.

I tried flex-direction: row-reverse; but it changed nothing.

I try this:

<style>
    .navbar li{
        display: flex;
        flex-direction: row;
        list-style-type: none;
        float: right;
        margin: 10px;
    }
</style>

<body>
    <nav class="navbar">
        <ul>
            <li><a>Gmail</a></li>
            <li><a>Images</a></li>
            <li><img src="/images/app.jpg"></li>
            <li><img src="/images/icone.jpg"></li>
        </ul>

    </nav>
</body>
htmlcss


Solution 1:[1]

You need to change .navbar li to .navbar ul. The problem is that you are trying to set the li elements as flex containers. But since they don't contain anything, it's not doing anything. Instead, each list item is getting floated to the right, which naturally reverses their order. Note, however, that you'll probably still want margin: 10px to remain on the li elements. Here is a modified example:

.navbar ul {
  display: flex;
  list-style-type: none;
  float: right;
}

.navbar li {
  margin: 10px;
}
<body>
<nav class="navbar">
  <ul>
  <li><a>Gmail</a></li>
  <li><a>Images</a></li>
  <li><img src="https://via.placeholder.com/32"/></li>
  <li><img src="https://via.placeholder.com/32"/></li>
  </ul>
</nav>
</body>

Solution 2:[2]

You are editing the li not the ul.

Solution 3:[3]

You need to have the styles on the ul and not the li elements:

.navbar ul {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Luis Pavel
Solution 3 Pytth

Related Questions