I've been trying to do a Right Aligned Navigation Bar with a searchbar and a loginicon to fit the page but I just can't seem to get it do that. It will automatically jumps down which is not my expectation. I want it like in one row.
Here is my website image
nav{ display: flex; justify-content: space-between; background-color: antiquewhite; } ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } ul li { margin-right: 20px; float: left; } form { display: flex; align-items: center; margin: 0 20px; } form input { padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .right{ display: flex; align-items: center; } .searchbar{ margin-right: auto; } a.login-link { display: flex; align-items: center; margin-left: auto; } img.login-icon { width: 20px; height: 20px; margin-right: 20px; } img.logo { width: 230px; height: auto; margin-right: 20px; }
I want it like in one row and the searchbar and the loginicon are in right hand side.
Источник: https://stackoverflow.com/questions/781 ... doesnt-fit
