Разбираемся в CSS
Anonymous
Панель навигации, выровненная по правому краю, автоматически опускается вниз, если она не помещается
Сообщение
Anonymous » 06 мар 2024, 15:58
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; }
1709729880
Anonymous
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; } [list] [*][url=index.php] [img]loginiconsnew.png[/img] [/url] I want it like in one row and the searchbar and the loginicon are in right hand side. Источник: [url]https://stackoverflow.com/questions/78114398/right-aligned-navigation-bar-will-automatically-jumps-down-when-it-doesnt-fit[/url]