Question

我正在尝试将一个文本框（用作搜索栏）放在与其他六个链接相同的行中（其中三个是小方块图像）。这是850px长。

[这是我正在谈论的页面] - 在三个链接和社交媒体按钮之后。

不幸的是，当我放入文本框时，它会移动到下一行。这是我的代码：

<form name="search" method="get" action="search.php">
<input type="text" name="find" id="find" />
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

理想情况下，我想让它与右边对齐，但我甚至无法将它放在线上。我已尝试将其与<span>对齐，但无论如何它都会保留在左侧。

Answer 1

<form>元素是一个块元素（它不与其他链接一致）。

您必须将链接放在<form>元素内以及输入中。实际上，只需将整个内容移动到表单中即可。应该没问题。以下是它的外观：

<form name="search" method="get" action="search.php">
    <p class="navitop">
        <a href="contact.php">Contact Us</a> | 
        <a href="localsites.php">Local News Sites</a> | 
        <a href="newsletter.php">Newsletter</a> 
        <a href="https://www.facebook.com/JansAviation"><img src="img/facebook-button.png" width="13" height="13"  alt="Facebook" /></a> 
        <a href="https://twitter.com/JansAviation"><img src="img/twitter-button.png" width="13" height="13" alt="Twitter"/></a> 
        <a href="https://plus.google.com/113060095863975848987"><img src="img/googleplus-button.png" width="13" height="13" alt="Google+" /></a> 

     <input type="text" name="find" id="find" value="" />
     <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
     </p>
</form>

Answer 2

你的问题似乎是form是一个块元素。试试这个css

.navitop > form { display:inline;}

Answer 3

首先，您不应将所有这些链接和图标放在<p>内。这就是<div>的用途。

将<p class="navitop">替换为<div>并相应更改其CSS声明。然后，将表单显示类型更改为内联块。请参阅下面的代码。

<div class="navitop">
   <a href="contact.php">Contact Us</a> | <a href="localsites.php">Local News Sites</a> | <a href="newsletter.php">Newsletter</a> 
   <a href="https://www.facebook.com/JansAviation"><img src="img/facebook-button.png" width="13" height="13" alt="Facebook"></a> <a href="https://twitter.com/JansAviation"><img src="img/twitter-button.png" width="13" height="13" alt="Twitter"></a> <a href="https://plus.google.com/113060095863975848987"><img src="img/googleplus-button.png" width="13" height="13" alt="Google+"></a> 
   <form name="search" method="get" action="search.php" style="
      display: inline-block;
      ">
      <input type="text" name="find" id="find" value="">
      <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;">
   </form>
</div>

插入文本框内联

3 个答案: