如何在导航栏中将文本元素向右浮动而png元素向左浮动

Question

I'm trying to set up a nav bar with a png link to the top left corner, and a text element "menu" to the top right corner. I haven't been able to get this to work with "float: right;"

I've included the code that shows I used float: right; for the .topnav elements. I'm not sure if .logo is interfering with this. I needed the png logo to be aligned with the text element which was not possible without putting them in separate divs.

 .container { position: absolute; margin: 20px; width: auto; } .topnav { overflow: hidden; float: right; } .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 10px 10px; text-decoration: none; font-size: 17px; } .topnav_right { float: right; } .logo { float: left; } 

 <div class="container"> <div class="logo"> <a href="index.html"><img src="####.png" style="max-width:100%;"></a> </div> <div class="topnav"> <div class="topnav_right"> <a href="index.html">Menu</a> </div> </div> </div> 

The text still remain next to the logo, when it should be in the opposite corner to the right.

Answer 1

In the container class, instead of having position: absolute , do position: flex . It will fix the problem.

Answer 2

Since you want a Navbar with left-aligned png-link and right-aligned text, it can be achieved in a much simpler way using flex-box, with the need of nesting them. It also handles alignment easily

You can read more about flexbox from csstricks

<style>
    .topnav {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
</style>
<div class="topnav">
    <div class="logo">
        <a href="index.html"><img   src="###.png"></a>
    </div>
    <div class="text">
        <a href="index.html">Menu</a>
    </div>
</div>