我如何能够显示三个Div和一个形式，使其恰好位于彼此之下

Question

我在razor视图中有以下标记，位于我网站的顶部导航栏： -

<section id="login" class="navbar-search pull-right">
@if (Request.IsAuthenticated) {  <span class="username customTopNavText " style=" display:block; ">

[<a href="~/Account/LogOff/" style="color:white"> Logout </a> ]                                
                                                                                              <i class="icon-user"></i> <strong >  @User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1) </strong></span>


<div  class="customTopNavText" id="currentdate"></div>
<div  class="customTopNavText" id="currenttime" ></div> 
 <form class="customSearch"method="GET" action="@Url.Action("Search", "Home")">

<input name="exactmatch" type="hidden" value="true">    <b>Search by Tag </b>   <input  class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/><input type="submit" value="Search" class="btn" />

  </form>
<br/>  <a href="~/Home/AdvanceSearch/" style="color:white;font-size:11px;float:right;border-width:0px"> Advance Search </a>
 }</section>

我想要实现的是在搜索按钮下面有＆＃34;高级搜索链接，目前我在IE上获得这些输出： -

并在firefox上： -

任何人都可以建议我如何强制将高级搜索链接放在搜索按钮下方？

由于

Answer 1

为了在搜索按钮下方推送高级搜索链接，可以使用内联样式，即：

<a href="~/Home/AdvanceSearch/" style="color:white; font-size:11px; position:absolute; top:30px; left:200px;"> Advance Search </a>

您可以根据适合您的设置设置顶部和左侧。给出顶部和左侧的多个值，并选择最适合您想要的区域。

下面，

position:relative    // make position of your <a></a> absolute
top:30px;            // place your <a></a> to 30px down from top of your parent div or element
left:200px;          // place your <a></a> to a distance of 200px far from left border of your div or element

希望这有帮助。

Answer 2

一种方法是在高级搜索中将margin-top设置为足够的高度。如果它没有被阻止＆＃34;通过搜索输入字段，它将浮动到页面的右侧，让您只设置边距高度。

Answer 3

我会在div /容器中使用一个表来准确地布置它的位置。容器将应用定位，然后高级搜索将始终与搜索栏位于同一位置。您需要做的就是格式化表格和打开的每个浏览器，所有元素都在同一个地方。

例如：

<form ...... >
<table>
  <tr>
    <td><a href="~/Home/AdvanceSearch/" style="color:white;font-size:11px;float:right;border-width:0px"> Advance Search </a></td>
    <td><b>Search by Tag </b></td>
    <td><input  class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/></td>
    <td><input type="submit" value="Search" class="btn" /></td>
  </tr>
</table>
</form>