无法对齐页面右侧的搜索栏

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

如果我在float:left上应用Element1，那么输出将如下所示。

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