検索ボックスを一番右端に合わせる方法

Question

こんにちは皆と幸せな週末。

私は、同じ横線上に整列しようとしています。左側のリンクボタンと右側の検索ボックスです。

検索ボックスは、右側の端までずっと進む必要があります。

ご協力いただきありがとうございます。

これは私がこれまで持っているものです。

これがメニューです：

<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> 

これは、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

あなたがかなりできるフレキシボックスを使用することができる場合簡単です。

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>