CSS 导航栏问题

Question

css code html code problem I'm having I have been having a AWFUL time trying to fix my html/css code to get the "logout" button to be displayed side by side with the search bar, icon and the rest of the navigation bar elements. It fits in perfectly if I make it an anchor tag, but because I need it to be in a form, I need it to be a submit button type. The only thing that seems to work is giving it a negative top margin which is not ideal since the more you compress the page, the higher up the button goes. I have no idea how to fix this and am in desperate need of some assistance.

Answer 1

Set display flex for nav/chid element to be side by side.

 .navbar { display: flex; }

 <div class="navbar"> <a href="#">Link</a> <form action="#" class="navbar"> <input type="text"> <button>Button</button> </form> </div>