How to "nail" the search block to the right edge of ul and align it vertically? And in the "collapsed" version make it under the rest of li .

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 
 ul.topnav { list-style-type: none; padding: 0; overflow: hidden; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75); margin-left: 5%; margin-right: 5%; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: rgb(91, 91, 91); text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } .Shape_1 { margin-top: 3%; border-style: solid; border-width: 1px; border-color: rgb(205, 205, 205); background-color: rgb(255, 255, 255); opacity: 0.38; width: 259px; height: 29px; z-index: 11; } 
 <ul class="topnav" id="myTopnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> <li> <div class="Shape_1"> поиск </div> </li> </ul>

    1 answer 1

    For li

     li { float: right; margin-right: 1%; }