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

我想在同一水平线上，左侧的链接按钮和右侧的搜索框对齐。

搜索框必须一直走到右侧的尽头。

非常感谢您的帮助。

这是我到目前为止有：

这是菜单：

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

来源

2016-11-25 Fabio Viola

如果你可以使用flexbox，这可以是相当简单。

jsFiddle

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

来源

2016-11-25 17:05:03 Stickers

当涉及到对准在X和/或Y轴，'''的显示项目：弯曲;'''派上用场。你可以在这里找到一个非常好的教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 定义一个容器，显示：flex;并根据需要使用justify-content，align-items和align-content将项目排列在下面。 – actc

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

来源

2016-11-25 17:45:18 Mallikarjun

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

回答

相关问题