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

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