如何將我的搜索框對齊到最右端

我想在同一水平線上，左側的鏈接按鈕和右側的搜索框對齊。

搜索框必須一直走到右側的盡頭。

非常感謝您的幫助。

這是我到目前爲止有：

這是菜單：

<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

如何將我的搜索框對齊到最右端

回答

相關問題