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

Question

我想将搜索栏 对齐到页面的最右侧。为此，我写了以下内容:

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

但是它没有对齐右侧的搜索栏。这是为什么？

Answer 1

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

尽管如此，您不应该使用内联样式。尽量使用外部样式。

float 所做的是将受影响的元素移动到屏幕的一侧。以下所有元素将与 float 元素水平对齐。

假设我们有 2 个这样的元素。

|| Element1 ||
|| Element2 ||

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

|| Element1 | Element2 ||

如果我改为应用 float:right，则输出将反转。

|| Element2 | Element1 ||

简而言之，float 完全按照它说的做。它将一个元素 float 到屏幕边缘，并使其成为后续元素的边缘。

PS:为了简单起见，我写了屏幕的边缘。您也可以以分层方式应用 float。在这种情况下，父元素的边缘成为对齐的边缘。