無法對齊頁面右側的搜索欄

Question

我想對齊頁面右側的search bar。爲此，我寫了以下內容：

<form method="get" action="#"> 
    <input type="search" name="q" style="text-align:right" /> 
</form> 

但它沒有對齊右側的搜索欄。這是爲什麼 ？

Answer 1

<form method="get" action="#" style="float:right"> 

雖然，你不應該使用內聯樣式。嘗試儘可能使用外部樣式。

float所做的是將受影響的元素移動到屏幕的一側。以下所有元素都將與浮動元素水平對齊。

假設我們有2個這樣的元素。

|| Element1 || 
|| Element2 || 

如果我在Element1申請float:left，則輸出這個樣子。

|| Element1 | Element2 || 

如果我應用float:right代替，則輸出將被顛倒。

|| Element2 | Element1 || 

簡而言之，float確實如它所說。它將一個元素浮動到屏幕邊緣，並使其成爲以下元素的邊緣。 PS：爲了簡單起見，我寫了屏幕邊緣。您也可以以分層方式申請float。在這種情況下，父元素的邊緣變爲與之對齊的邊緣。

Answer 2

text-align這樣做，它將元素中的文本對齊到右側。在輸入框的情況下，它將光標放在輸入欄的右側。你要輸入框float的權利，這使輸入框的最右邊的父元素（在這種情況下，表格）：

HTML

<form method="get" action="#"> 
    <input placeholder="Search" type="search" name="q" id="search-box" /> 
</form> 

CSS

form{ 
    background-color: #000; 
    overflow: auto; 
    height: 50px; 
    padding:5px 5px 0; 
} 
#search-box{ 
    float:right; 
} 

這裏的jsFiddle