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

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以分层方式申请.在这种情况下,父元素的边缘成为要对齐的边缘.