Help to make up the menu block. I can not figure out how to do everything in one row

Here is the CSS code and HTML code

/*мСню*/ .menu { margin-top: 20px; text-align: center; max-width: 760px; float: left; } .menu a { text-transform: uppercase; text-decoration: none; color: #717171; display: block; /* мСняСм ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π±Π»ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */ padding: 10px 13px; background-color: #DDDDDD; } .menu .active { color: #fff; background-color: #D45757; } .menu ul { /* font-size: 0; */ } .menu li { display: inline-block; font-family: Open Sans, sans-serif; font-size: 14px; height: 40px; } /*ΠΊΠΎΠ½Π΅Ρ† мСню*/ /*поиск*/ #search-block-form { margin-top: 20px; margin-left: 0px; text-align: center; /* max-width: 760px; */ float: left; } #search-block-form{ width:250px; height:28px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; box-shadow:0px 1px 0px rgba(255,255,255,0.1); } .focus-active{ border-color:#aaa !important; background:#fff !important; } #search-block-form input{ padding:0; margin:0; display:block; border:none; outline:none; background:none; width:100%; height:100%; } #search-block-form .form-actions{ width:58px; height:28px; float:right; border:#a8b5b9 solid 1px; margin:-1px -1px 0 0; background:url(images/submit.png) left top repeat; } #search-block-form .form-actions input:hover{ cursor:pointer; } #search-block-form .form-actions input{ overflow:hidden; font:11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#a8b5b9; } #search-block-form .form-item{ width:157px; padding:0 0 0 33px; float:left; height:28px; background:url(images/searchIcon.png) 3px 2px no-repeat; } #search-block-form .form-item input{ font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; height:auto !important; padding:6px 0; } 
 <nav class="menu"> <ul> <li><a href="#" class="active">Music</a></li> <li><a href="#">Movies</a></li> <li><a href="#">TV Series</a></li> <li><a href="#">Education</a></li> <li><a href="#">Lifestyle</a></li> <li><a href="#">Fashion</a></li> <li><a href="#">Health</a></li> <li><a href="#">Photography</a></li> </ul> <form action="" method="post" id="search-block-form"> <div class="form-item"> <input type="text" name="" value="" maxlength="128" placeholder="SEARCH AWESOMAG"> </div> <div class="form-actions"> <input type="submit" name="op" value="" class="form-submit"> </div> </form> </nav>

    1 answer 1

     * { padding: 0; margin: 0; } /*мСню*/ .menu { margin-top: 20px; max-width: 760px; display: flex; font-size: 12px; } .menu a { text-transform: uppercase; text-decoration: none; color: #717171; display: block; padding: 0 5px; line-height: 30px; background-color: #DDDDDD; } .menu .active { color: #fff; background-color: #D45757; } .menu ul { flex: 4 0; } .menu li { display: inline-block; font-family: Open Sans, sans-serif; font-size: 11px; } /*ΠΊΠΎΠ½Π΅Ρ† мСню*/ /*поиск*/ #search-block-form { display: flex; flex: 1 0; height: 28px; border: #a8b5b9 solid 1px; background: url(images/searchBg.png) left top repeat-x; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1); } .focus-active { border-color: #aaa !important; background: #fff !important; } #search-block-form input { display: block; border: none; outline: none; background: none; width: 100%; } #search-block-form .form-item { flex: 1 0; height: 28px; background: url(images/submit.png) left top repeat; } #search-block-form .form-actions input:hover { cursor: pointer; } #search-block-form .form-actions input { overflow: hidden; font: 11px/16px"Trebuchet MS", Arial, Helvetica, sans-serif; color: #a8b5b9; } #search-block-form .form-actions { width: 28px; height: 28px; flex: 0 0 28px; border-left: #a8b5b9 solid 1px; background: url(images/searchIcon.png) 3px 2px no-repeat; } #search-block-form .form-item input { font: 10px/28px"Trebuchet MS", Arial, Helvetica, sans-serif; color: #222; padding: 0 5px; } 
     <nav class="menu"> <ul> <li><a href="#" class="active">Music</a> </li> <li><a href="#">Movies</a> </li> <li><a href="#">TV Series</a> </li> <li><a href="#">Education</a> </li> <li><a href="#">Lifestyle</a> </li> <li><a href="#">Fashion</a> </li> <li><a href="#">Health</a> </li> <li><a href="#">Photography</a> </li> </ul> <form action="" method="post" id="search-block-form"> <div class="form-item"> <input type="text" name="" value="" maxlength="128" placeholder="SEARCH AWESOMAG"> </div> <div class="form-actions"> <input type="submit" name="op" value="" class="form-submit"> </div> </form> </nav>