html - 为什么 没有在 中正确对齐？

Question

我想在 <nav> 中插入我的搜索栏我的 HTML 网页的标签。它基本上是一个 HTML 文本框 <form>我希望右对齐，而其他菜单项应采用默认对齐方式 (其他菜单项是纯文本，如 <h2> 带有链接的标题)。

这是 <nav>我页面的栏(该页面是一个 .PHP 页面):

<nav>
    <!--site navigation links-->

    <h2 style="display:inline-block;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html" style="color:#ffdd77;">
    Home.</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="about.html">About.</a></h2>

    <!--search bar-->

    <form align="right" action="search.php" method="GET" 
     style="display:inline-block;">
            <input type="text" name="query" placeholder="keyword search" />
            <input type="submit" name="submit" value="Search" />
    </form>

</nav>

问题是 <form>没有正确对齐。输出如下图所示:

我还尝试设置 align <input/> 的属性标记为 "right"但它仍然没有帮助。我可以通过在导航链接和表单之间放置一些空格(  - 大约 90 个)将它移到右端，但是没有办法用任何 HTML/CSS 属性/参数？

Answer 1

<form action="search.php" method="GET" 
     style="display:inline-block;float:right!important;margin-top:25px;">
        <input type="text" name="query" placeholder="keyword search" />
        <input type="submit" name="submit" value="Search" />
</form>

这应该有效。

看看这个 JSFiddle