Question

我想在我的HTML网页的<nav>标记内插入我的搜索栏。它基本上是HTML <form>的文本框，我想要对齐，而其他菜单项应该默认对齐（其他菜单项为纯文本为{{1}用链接标题）。

这是我页面的<h2>栏（页面是.PHP页面）：

<nav>

问题是<nav>  <h2 style="display:inline-block;">      <a href="index.html" style="color:#ffdd77;"> Home.</a>     |      <a href="about.html">About.</a></h2>  <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

Answer 2

尝试使用float。对齐是用于文本

<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 style="float: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>

Answer 3

你可以使用

form {
  position: absolute;
    right:0px;
  }

＆＃13;

form {
  position: absolute;
right:0px;
  }

＆＃13;

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

＆＃13;

或

form {
  float:right;
  }

＆＃13;

form {
  float:right;
  }

＆＃13;

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

＆＃13;

Answer 4

我个人会使用网格系统来做这件事。例如，使用twitter bootstrap

<div class="Container">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

或者您可以查看Flexbox显示。

Answer 5

尝试这样的事情。

Html代码

<nav>
    <h2 >
    &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">
            <input type="text" name="query" placeholder="keyword search" />
            <input type="submit" name="submit" value="Search" />
    </form>

    </nav>

添加Css

   nav{
     display: flex;
   }
   form{
     margin-bottom: 10px;
     margin-top: 20px;
     margin-left: 10px;
   }

为什么<form>没有在<nav>中对齐？

5 个答案: