HTML / CSS Set everything on the same line - html

Question

My problem is this: when inserting a new button in navbar the User Name goes to the bottom line. My goal is for everything to be aligned on the same line.
I have already used display: inline-block and flex-direction: row but it did not work. Can someone help me?
HTML
<div class="col-md-10 p0">
<div class="collapse navbar-collapse" id="min_navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Tabelas</li>
<li>Registo</li>
<li class="dropdown submenu">
Quem Somos
<ul class="dropdown-menu other_dropdwn">
<li>About Us</li>
<li>About Us-2</li>
</ul>
</li>
<li class="dropdown submenu">
Serviços
<ul class="dropdown-menu other_dropdwn">
<li>Services</li>
<li>Services-2</li>
</ul>
</li>
<li class="dropdown submenu">
Notícias
<ul class="dropdown-menu">
<li>Últimas Notícias</li>
<li>Notícia Singular</li>
</ul>
</li>
<li>Contactos</li>
<li>Login</li>
<li><i class="fa fa-search"></i></li>
<li class="dropdown submenu">
<img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>

Answer 1

Your navbar may be too big, so it won't work. But, if it is not too big, this might work:
Here, add a class. I chose floater:
<li class="dropdown submenu floater">
<img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Logout</li>
</ul>
</li>
In your CSS, do:
.floater {
float: right;
}
You may have some extra margin or padding somewhere in your code, so I would check that.

Answer 2

Please, consider moving from float to flexbox or grid to set position of elements!* We have "killer-features" in CSS nowadays, like Flexbox or even better CSS Grid (but there's some lacks of browser support). Yep, it's quite difficult to handle it at the begining, but when you'll understand how to roll with it - you'll love it!
I have already used display: inline-block and flex-direction: row but
it did not work. Can someone help me?
You can't combine display: inline-block with flex-direction, because you're trying to combine flex with blocks. You should use display: inline-flex instead.
HTML Markup:
<ul class="d-flex">
<li>Lorem, ipsum.</li>
<li>Ad, quas.</li>
<li>Recusandae, minima.</li>
<li>Tempore, sint.</li>
<li>Consequuntur, porro.</li>
<li>Ipsum, at!</li>
</ul>
SCSS Markup:
.d-flex {
display: inline-flex;
}
ul {
li {
display: inline-flex;
margin: 0 10px;
padding: 2px 8px;
border: 1px solid black;
border-radius: 4px;
}
}
Here you can try with flex:
https://codepen.io/dstolarski/pen/XOYEwR