How to align my search box to the far right end

Question

I'm trying to align on the same horizontal line, the links buttons on the left side and the search box on the right side.

The search box must go all way to the end of the right side.

This is the menu:

<div class="navmenu"> <ul id=menu> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li>   <li><form action='q.php' method='GET'> <input type='text' size='25' name='search'> <input type='submit' name='submit' value='Search' > </form></li> </ul> </div>

This is the css:

.navmenu { background-color: #FAFAFA;}
.navmenu ul {margin: 0; padding: 0; 
    list-style-type: none; list-style-image: none; }
.navmenu li {display: inline; }
.navmenu ul li a {text-decoration:none;  margin: 4px;
    padding: 5px 20px 5px 20px; color: #FFFFFF;
    background: #5CB85C;}
.navmenu ul li a:hover {color: #FFFFFF;
    background: #449D44; }

Answer 1

If you can use flexbox, that can be pretty easy.

jsFiddle

.navmenu ul {
  display: flex; /* defines flexbox */
}
.navmenu li:last-child {
  margin-left: auto; /* pushes the last <li> to the far right */
}

Answer 2

 .navmenu { background-color: #FAFAFA;} .navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .navmenu li {display: inline; } .navmenu ul li a {text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: #FFFFFF; background: #5CB85C;} .navmenu ul li a:hover {color: #FFFFFF; background: #449D44; } .navmenu ul li form{ text-align:right;margin-top:-20px; } 

 <div class="navmenu"> <ul id=menu> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><form action='q.php' method='GET'> <input type='text' size='25' name='search'> <input type='submit' name='submit' value='Search' > </form></li> </ul> </div>