How to align avatar in a navbar to the right?-CodePudding

Here's the navbar

<nav >
    <button  type="button" data-toggle="collapse">
        <span ></span>
    </button>
    <div >
        <ul >
            <li >
                <a  href="#">item1</a>
            </li>
            <li >
                <a  href="#">item2</a>
            </li>
            <li >
                <a  href="#">item3</a>
            </li>
            {% if request.user.is_authenticated %}
                {% if request.user.is_superuser %}
                    <li >
                        <a  href={% url 'admin:index' %}>Admin</a>
                    </li>
                {% endif %}
                <img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
                      style="width: 40px; margin-right: auto"
                     alt="Avatar"/>
            {% else %}
                <li >
                    <a  href={% url 'signin' %}>Sign in</a>
                </li>
                <li >
                    <a  href={% url 'signup' %}>Sign up</a>
                </li>
            {% endif %}
        </ul>
    </div>
</nav>

Here's how it looks

I need the avatar aligned to the right. So far I tried:

style="width: 40px; display: flex; flex-direction: row-reverse"

and

style="width: 40px; align-self: stretch"

and

style="width: 40px; horiz-align: right"

and

style="width: 40px; display: -ms-inline-flexbox"

and

style="width: 40px; margin-right:10px;"

and the list goes on ... Nothing works.

more details more details more details more details

CodePudding user response：

When using bootstrap I usually drop a spacer element and give it a flex-grow of 1 to push everything to the left and right as follows:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav >
  <button  type="button" data-toggle="collapse">
        <span ></span>
    </button>
  <div >
    <ul >
      <li >
        <a  href="#">item1</a>
      </li>
      <li >
        <a  href="#">item2</a>
      </li>
      <li >
        <a  href="#">item3</a>
      </li>
      <!-- inserted sneaky spacer below -->
      <li class='flex-grow-1'></li>
      <img src="https://placekitten.com/40/40"  style="width: 40px;" alt="Avatar" />
      <li >
        <a  href={% url 'signin' %}>Sign in</a>
      </li>
      <li >
        <a  href={% url 'signup' %}>Sign up</a>
      </li>
    </ul>
  </div>
</nav>