我正在尝试在同一水平线上对齐,左侧是链接按钮,右侧是搜索框。
搜索框必须一直到右侧的末尾。
这是菜单:
<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; }
答案 0 :(得分:2)
如果您可以使用flexbox,那可能非常简单。
.navmenu ul {
display: flex; /* defines flexbox */
}
.navmenu li:last-child {
margin-left: auto; /* pushes the last <li> to the far right */
}
答案 1 :(得分:0)
.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; }
&#13;
<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>
&#13;