如何将我的搜索框对齐到最右端

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

如果你会使用 flexbox，那会很简单。

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>

如何将我的搜索框对齐到最右端

How to align my search box to the far right end

html

css

alignment

horizontallist